【6日でできるHTML＆CSS入門】さまざまなボーダー

―線ひとつで“印象”は激変する―
　ボックスモデルを理解すると、要素を囲む境界線 border の奥深さに気づきます。太さ・色・線種・辺の組み合わせ方を変えるだけで、カードは高級感を帯び、見出しはアクセントになり、表セルはグリッドに早変わり―ここでは CSS が備える多彩なボーダー表現を体系的に紹介します。

１．基本のボーダー指定

1.1. border: で三要素を一括宣言

border: 4px solid #e63946;  /* 太さ4px・実線・赤 */
順序意味例
1線幅1px, 0.25em
2線種solid, dashed, double
3色キーワード / HEX / rgb()

1.2. 線種カタログ

値表示例主な用途
solid───汎用
double══見出し強調
dashed▬▬▬区切り線
dotted⋯⋯⋯注釈枠
none / hidden―線を消す

２．サンプルで確認

2.1. h2 見出しを装飾

ファイル名： lesson29_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボーダーバリエーション</title>
<style>
  .solid  { border:5px solid  #ff595e; }
  .double { border:5px double #ff595e; }
  .dashed { border:5px dashed #ff595e; }
  .dotted { border:5px dotted #ff595e; }
  .left   { border-left:5px solid #ff595e; padding-left:8px; }
</style>
</head>
<body>
  <h1>Border Variations</h1>
  <h2 class="solid">実線ボーダー</h2>
  <h2 class="double">二重線ボーダー</h2>
  <h2 class="dashed">破線ボーダー</h2>
  <h2 class="dotted">点線ボーダー</h2>
  <h2 class="left">左側だけボーダー</h2>
</body>
</html>

表示結果

各 h2 見出しが 5 px 幅・赤色の異なる線種で囲まれ、left クラスだけは左辺のみ線とインデント。

2.2. コード解説

クラスプロパティ効果
.solidborder5 px 実線
.double同上5 px 二重線
.leftborder-left左辺のみ線＋余白

３．辺ごとの個別指定

3.1. 専用プロパティ

辺線指定線種だけ
上border-topborder-top-style
右border-rightborder-right-style
下border-bottomborder-bottom-style
左border-leftborder-left-style

3.2. 応用サンプル：カードの上下にアクセント

ファイル名： 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;
    }

    /* アクセント付きカード */
    .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;
    }

    /* タイトルと本文 */
    .card h3{
      margin-top:0;
      color:#333;
      font-size:1.15rem;
    }
    .card p{
      margin:0.5rem 0 0;
      color:#555;
      line-height:1.5;
    }
  </style>
</head>
<body>
  <section class="card">
    <h3>お知らせ</h3>
    <p>システムメンテナンスを<br>5月1日 02:00〜04:00 に実施します。</p>
  </section>

  <section class="card">
    <h3>イベント情報</h3>
    <p>6月21日にオンライン勉強会を開催します。<br>テーマは「最新 CSS レイアウト」。</p>
  </section>

  <section class="card">
    <h3>お問い合わせ</h3>
    <p>ご質問は support@example.com まで。<br>平日 9:00-17:00 に対応します。</p>
  </section>
</body>
</html>

表示結果

４．タグ & プロパティまとめ表

要素 / 属性役割備考
<h1> <h2>見出しデモ用
<style>内部 CSS-
border線幅・線種・色一括指定
border-left など辺のみ幅・種・色まとめ
border-left-style など線種のみ辺ごと細分化

まとめ

  • ボーダーは 幅・線種・色 の 3 点セット。border: で一括、border-left: 等で片辺のみ。
  • 線種は solid / double / dashed / dotted … を覚えれば実務の 9 割をカバー。
  • 個別指定と組み合わせれば、カードの上線だけ強調・表の縦罫だけ点線など、UI パーツの表現力が飛躍的に向上します。