6日でできる 新HTML&CSS入門｜ボーダーの線種と色
たった1本の線でも、デザインの印象は大きく変わる。
ボーダーの線種と色を使い分けて、見やすく伝わるWebデザインを作ろう。
CSSで見た目を整えるとき、背景色や文字サイズに目が向きやすいのですが、実はボーダーもとても重要な役割を持っています。ボーダーは、要素の境界をはっきり見せたり、見出しを強調したり、カードや表にまとまりを持たせたりするときに活躍します。
ボーダーの面白いところは、単に線を引くだけではないことです。線の太さ、線の種類、色、そしてどの辺に付けるかを変えるだけで、同じ要素でも印象が大きく変わります。すっきり見せたいなら細い実線、目立たせたいなら二重線、やわらかく区切りたいなら点線、といったように使い分けることができます。
また、ボーダーはボックスモデルとも深く関わっています。paddingの外側にあり、要素の輪郭を形作る部分なので、余白やサイズの感覚と一緒に理解しておくと、デザインの調整がぐっとしやすくなります。
この記事では、borderの基本の書き方から、よく使う線種、辺ごとの指定方法、見出しやカードへの応用まで、サンプルを交えながら丁寧に整理していきます。
ボーダーは何を表しているのか
ボーダーは、要素の外枠に表示される線です。段落や見出し、画像、カード、入力欄など、さまざまな要素に付けることができます。
たとえば、ボーダーがない見出しは文字だけが並んで見えますが、ボーダーを付けると、その見出しがひとつの部品として認識しやすくなります。カードにボーダーを付けると、内容のまとまりが分かりやすくなります。表にボーダーを付けると、データの区切りが見やすくなります。
ボーダーは装飾というだけでなく、情報を整理して見せるための道具でもあります。そのため、目立たせたいのか、軽く区切りたいのか、やわらかく見せたいのかを考えて使うことが大切です。
図1：ボーダーは線の太さ・種類・色で印象が変わる
この図から分かること
ボーダーは、ただ線を付けるだけのCSSではありません。線の太さ、線種、色を変えることで、見出しやボックスの印象を大きく変えられます。ボーダーを上手に使うと、情報のまとまりや強調したい部分が伝わりやすくなります。
borderで線の太さ・種類・色をまとめて指定する
ボーダーを指定するときによく使うのがborderです。borderは、線の太さ、線の種類、色をまとめて1行で指定できる便利な書き方です。
基本の形は次のとおりです。
border: 線の太さ 線の種類 色;たとえば、4pxの赤い実線を付けたい場合は、次のように書きます。
border: 4px solid #e63946;この1行の中に、3つの情報が入っています。
| 順序 | 内容 | 例 |
|---|---|---|
| 1 | 線の太さ | 1px、2px、4px、0.25em |
| 2 | 線の種類 | solid、dashed、double、dotted |
| 3 | 色 | red、#e63946、rgb(230, 57, 70) |
この形を覚えておくと、まずは基本的なボーダーの指定に困りません。
線の太さに使う単位
ボーダーの太さには、よくpxが使われます。pxは画面上のピクセルを基準にした単位なので、見た目をイメージしやすいのが特徴です。
| 単位 | 意味 | 使い方の例 |
|---|---|---|
| px | ピクセル単位 | 1px、2px、5px |
| em | 文字サイズ基準の相対単位 | 0.1em、0.2em |
一般的な見出しやカードのボーダーでは、1pxから5pxくらいがよく使われます。細くすっきり見せたいなら1pxや2px、はっきり強調したいなら4pxや5pxといった使い分けがしやすいです。
よく使う線種を整理しよう
borderでは、線の種類も指定できます。線種を変えるだけでも、見た目の雰囲気はかなり変わります。
| 値 | 見た目のイメージ | 主な用途 |
|---|---|---|
| solid | ふつうの実線 | 汎用的で最も使いやすい |
| double | 二重線 | 見出しや枠の強調 |
| dashed | 破線 | 区切りや案内枠 |
| dotted | 点線 | 注釈ややわらかい装飾 |
| none | 線を表示しない | ボーダーを消したいとき |
| hidden | 線を隠す | 表などで制御したいとき |
solidはもっとも基本的な線種で、実務でもよく使います。doubleは存在感があり、見出しや特別な枠を目立たせたいときに向いています。dashedは「ここで区切る」という印象を出しやすく、dottedはやわらかく軽い雰囲気になります。
色の指定方法
ボーダーの色は、文字色や背景色と同じようにいくつかの方法で指定できます。
border: 3px solid red;
border: 3px solid #ff595e;
border: 3px solid rgb(255, 89, 94);よく使われるのは、色名、HEX、rgb()です。
| 書き方 | 例 | 特徴 |
|---|---|---|
| 色名 | red | 手軽に書ける |
| HEX | #ff595e | Web制作でよく使う |
| rgb() | rgb(255, 89, 94) | 数値で色を管理できる |
学習段階では、まずはHEXで色を指定することが多いです。デザインカンプや配色指定でも、HEXがよく使われるためです。
まずは見出しで線種の違いを確認する
ボーダーの違いは、見出しに付けてみると分かりやすいです。ここでは、h2にさまざまな線種を付けて、線の印象を見比べてみます。
ファイル名： lesson29_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しのボーダー装飾</title>
<style>
.line-solid { border: 5px solid #ff595e; }
.line-double { border: 5px double #ff595e; }
.line-dashed { border: 5px dashed #ff595e; }
.line-dotted { border: 5px dotted #ff595e; }
.left-accent { border-left: 5px solid #ff595e; padding-left: 10px; }
h2 {
margin: 16px 0;
padding: 10px;
}
</style>
</head>
<body>
<h1>ボーダーの見え方を比べる</h1>
<h2 class="line-solid">実線の見出し</h2>
<h2 class="line-double">二重線の見出し</h2>
<h2 class="line-dashed">破線の見出し</h2>
<h2 class="line-dotted">点線の見出し</h2>
<h2 class="left-accent">左側だけ強調した見出し</h2>
</body>
</html>ブラウザの表示例
このHTMLをブラウザで表示すると、それぞれのh2が同じ太さと同じ色で装飾されながら、線種だけが異なる見え方になります。
実線は標準的で読みやすく、二重線はしっかり強調された印象になります。破線は少し軽やかな区切りの印象になり、点線はやわらかい雰囲気になります。また、left-accentは左側だけに線を付けているため、囲むのではなく「見出しのアクセント」として見せることができます。
サンプル1で使っているCSSを整理する
サンプルで使ったクラスを整理すると、次のようになります。
| クラス名 | 指定内容 | 効果 |
|---|---|---|
| .line-solid | border: 5px solid #ff595e; | 5pxの赤い実線で囲む |
| .line-double | border: 5px double #ff595e; | 5pxの赤い二重線で囲む |
| .line-dashed | border: 5px dashed #ff595e; | 5pxの赤い破線で囲む |
| .line-dotted | border: 5px dotted #ff595e; | 5pxの赤い点線で囲む |
| .left-accent | border-left: 5px solid #ff595e; padding-left: 10px; | 左側だけ線を付け、文字との間に余白を入れる |
ここで注目したいのは、left-accentではborderではなくborder-leftを使っていることです。これによって、4辺すべてではなく左側だけに線を表示できます。
図2：線種の違いと左辺だけのアクセント
この図から分かること
同じ見出しでも、線の種類を変えるだけで印象が変わります。また、4辺を囲むだけでなく、左側だけに線を付けるような使い方もできます。ボーダーは単なる飾りではなく、情報の強弱を付けるための表現として使えます。
辺ごとにボーダーを指定する方法
ボーダーは4辺すべてにまとめて付けるだけでなく、上、右、下、左を個別に指定することもできます。
| 辺 | まとめて指定 | 線種だけ指定 |
|---|---|---|
| 上 | border-top | border-top-style |
| 右 | border-right | border-right-style |
| 下 | border-bottom | border-bottom-style |
| 左 | border-left | border-left-style |
たとえば、上側だけ青い線を付けたい場合は、次のように書けます。
border-top: 4px solid #1982c4;左側だけ破線にしたい場合は、次のように書けます。
border-left: 4px dashed #1982c4;また、線種だけを変えたい場合にはborder-left-styleのような細かい指定もできますが、学習の最初はborder-leftのようにまとめて書くほうが分かりやすいです。
辺ごとの指定はどんな場面で便利なのか
辺ごとの指定は、囲みすぎずにデザインのアクセントを付けたいときに便利です。
たとえば、見出しの左にだけ線を付けると、目立ちすぎないまま強調できます。カードの上と下だけに線を付けると、落ち着いたデザインにしながら区切りをはっきり出せます。表の縦線だけ、または横線だけを変えるような使い方もできます。
全部を囲むと重たく見える場合でも、一部の辺だけに線を付けると軽やかなデザインにしやすいです。ボーダーは「全部に付けるか、付けないか」ではなく、「どの辺に、どんな線で付けるか」まで考えられると表現の幅が広がります。
カードの上下にアクセントを付ける応用例
次は、カード型のデザインに上下だけボーダーを付ける例を見てみます。全部を囲むのではなく、上と下だけに線を入れることで、すっきりしながら印象に残る見た目を作れます。
ファイル名： lesson29_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カードの上下ボーダー装飾</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
background: #f6f8fa;
margin: 0;
padding: 2rem;
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.info-card {
width: 260px;
background: #ffffff;
border-top: 4px solid #1982c4;
border-bottom: 4px solid #1982c4;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
padding: 1rem;
}
.info-card h3 {
margin-top: 0;
color: #333;
font-size: 1.1rem;
}
.info-card p {
margin: 0.5rem 0 0;
color: #555;
line-height: 1.5;
}
</style>
</head>
<body>
<section class="info-card">
<h3>更新情報</h3>
<p>サービスページの内容を更新しました。新しい導入事例も追加しています。</p>
</section>
<section class="info-card">
<h3>セミナー案内</h3>
<p>7月12日にオンラインセミナーを開催します。テーマはCSS設計の基本です。</p>
</section>
<section class="info-card">
<h3>お問い合わせ</h3>
<p>ご質問は contact@example.com までお送りください。平日中に順次対応します。</p>
</section>
</body>
</html>ブラウザの表示例
このサンプルでは、白いカードの上端と下端に青いボーダーが付きます。左右には線を付けていないので、全面を囲んだカードよりも軽やかな印象になります。
カードの中にはborder-radiusとbox-shadowも使っているため、少し柔らかく立体感のある見た目になります。ボーダーだけでも印象は変わりますが、背景色や影と組み合わせることで、より完成度の高いカードデザインにできます。
サンプル2で見ておきたいポイント
このサンプルでは、border-topとborder-bottomを使って、カードの上下だけを強調しています。ここが一番のポイントです。
| 指定 | 役割 | 効果 |
|---|---|---|
| border-top: 4px solid #1982c4; | 上辺の線 | 上にアクセントを付ける |
| border-bottom: 4px solid #1982c4; | 下辺の線 | 下にアクセントを付ける |
| border-radius: 4px; | 角を少し丸くする | やわらかい印象にする |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); | 影を付ける | カード感を出す |
| padding: 1rem; | 内側余白を作る | 文章を読みやすくする |
特にborder-topとborder-bottomを分けて使う考え方は、見出し、カード、通知枠、ボタンなどにも応用しやすいです。
図3：辺ごとのボーダー指定でカードにアクセントを付ける
この図から分かること
ボーダーは4辺すべてに付けるだけでなく、必要な辺だけに付けることもできます。上辺や下辺だけを使うと、重たくなりすぎず、すっきりしたアクセントを作れます。カードや見出しなどのUI部品では、このような辺ごとの使い分けがとても役立ちます。
border-leftやborder-top-styleのような細かい指定も使える
ボーダー関連のCSSには、まとめて指定するもの以外にも、細かく制御するためのプロパティがあります。
| プロパティ | 役割 |
|---|---|
| border | 4辺まとめて、太さ・線種・色を指定する |
| border-top | 上辺だけ、太さ・線種・色を指定する |
| border-right | 右辺だけ、太さ・線種・色を指定する |
| border-bottom | 下辺だけ、太さ・線種・色を指定する |
| border-left | 左辺だけ、太さ・線種・色を指定する |
| border-left-style | 左辺の線種だけを指定する |
| border-top-color | 上辺の色だけを指定する |
| border-bottom-width | 下辺の太さだけを指定する |
最初はborder、border-left、border-topあたりを使えれば十分です。必要になったら、線種だけ、色だけ、太さだけを変更する細かいプロパティも使えるようにしていくと、表現の幅がさらに広がります。
ボーダーを使うときの考え方
ボーダーは目に入りやすい要素なので、使い方によっては便利にもなりますし、少しうるさく見えることもあります。だからこそ、どこを強調したいのか、どこを区切りたいのかを考えて使うことが大切です。
たとえば、ページ内の見出しを全部太い二重線で囲んでしまうと、どこも同じくらい強く見えてしまいます。一方で、重要な見出しだけを二重線にし、通常の見出しは左線だけにする、といった使い分けをすると、情報のメリハリが出ます。
また、色も大切です。赤いボーダーは目を引きやすく、注意や強調に向いています。青は落ち着きや信頼感を出しやすく、案内や情報カードに向いています。グレーは控えめで、区切りや枠組みとして自然に使いやすいです。
使用するタグとCSSの整理
最後に、今回よく使ったタグとCSSを整理しておきます。
| 要素 / プロパティ | 役割 | 補足 |
|---|---|---|
| h1、h2、h3 | 見出しを表す | ボーダー装飾の例として使いやすい |
| section | 内容のまとまりを表す | カードの例に使える |
| style | HTML内にCSSを書く | 学習用サンプルで便利 |
| border | 太さ・線種・色をまとめて指定する | 基本形 |
| border-left など | 特定の辺だけ指定する | 左線や上線の装飾に便利 |
| padding | 内側余白を指定する | ボーダーと文字の距離を取る |
| border-radius | 角を丸くする | やわらかい見た目になる |
| box-shadow | 影を付ける | カード感を出しやすい |
ボーダーは情報の見せ方を整える道具
ボーダーは、見た目を飾るためだけのものではありません。どこが見出しなのか、どこがひとまとまりの情報なのか、どこを少し強調したいのかを伝えるための大切な手段です。
線の太さ、線種、色、そしてどの辺に付けるかを考えるだけで、同じHTMLでも印象はかなり変わります。まずはborderで基本の実線を試し、次にdoubleやdashed、dottedを見比べ、さらにborder-leftやborder-topを使って一部の辺だけを装飾してみると、ボーダーの使い分けが自然に身に付いていきます。
CSSでは、ほんの少しの違いが見やすさやデザインの完成度に大きく影響します。ボーダーの線種と色をうまく扱えるようになると、見出し、カード、表、フォームなど、さまざまな部品をより分かりやすく魅力的に整えられるようになります。