枠線の表示（border）

Webページを見やすくするためには、「要素ごとの区切り、境界線を明確にする」というテクニックが有効であることが多いです。
次の見出しのうち、どちらが区切りが明確で注目度が高いか、一目瞭然です。

ここは見出しです。

上下どちらも同じフォントサイズ、同じ色、同じフォントウェイト（太字）にしていますが、境界線をつけるだけでだいぶ印象が変わるのがわかるかと思います。
今回は境界線の付け方（borderプロパティ）の紹介がメインなので、他のプロパティについてはそこまで詳しく踏み込みませんが、背景色をつけたり、境界線の付近に影をつけたりすると、より他の要素との区切りを明確にすることができます。

ここは見出しです。

さらにオマケで、前回の記事で紹介した中央配置のテクニックを使うと、さらに目立たせることができます。

ここは見出しです。

このように、特に目立たせたい要素には「他の要素にはない設定を施す」ことが重要で、その中でも境界線（ボーダーライン）は見た目的な効果が大きいため、使用機会もかなり多いです。

優先順位としては、余白の調整や、要素の幅の設定の方が高くはあるのですが、そういった基礎を押さえた次の段階として身につけたいCSSプロパティと言えます。
borderプロパティをうまく使いこなして、より見た目をスッキリ、充実させていきましょう！

◆ borderとは ◆

border（ボーダー）プロパティは、要素に枠線（境界線）を指定するプロパティです。
枠線というと表（< table >タグ）の時に使うイメージがあるかもしれませんが、borderプロパティは表はもちろん、あらゆる要素に設定可能です。
表以外でよく使われる場面としては
・メニューボタン（リスト項目）
・見出し
・段落（文章のまとまり）
・その他区画分け
などがあります。

CSSの記述方法ですが、borderプロパティはborder-style、border-width、border-colorを一度に設定できるプロパティのため、「こう書けば良い」という組み合わせが多数存在します。
余白の設定の記事で、marginやpaddingを設定する時にmargin-topやmargin-leftプロパティを使わず、marginプロパティで一度に設定できることをご紹介しましたが、それと同じようなものです。
以下に、borderプロパティのCSS記述方法を示しますが、これはあくまで一例であるということを念頭に置いて見てください。

＊borderプロパティの指定の仕方＊
■ セレクタ { border: solid thin red; }

上記の例では、border-style、border-width、border-colorの順になっています。（必ずしもこの順番でないといけないということはありません）
最も注意しないといけない点は、このうち、border-styleプロパティの値に該当するもの（上記の例では「solid」）は必ず設定する必要があるということです。

このborder-styleに該当する値を設定しないと、他のプロパティ（border-width、border-color）に該当する値が正しく設定されていても、枠線が一切表示されません。表示がおかしくなるとかであれば原因を突き止めやすいのですが、「そもそも表示されない」というトラブルは焦りますし、解決に時間がかかってしまうことが多いです。
僕も、CSSを扱い始めた頃は「あれ？borderを設定してるのに枠線が表示されない？」と戸惑ってしまうことがよくありました笑。なので、borderプロパティを設定する時は、記述順序が決まっているわけではないのですがborder-styleに該当する値から記述するというマイルールを設定しておいた方が良いと思います。

border-styleの値は、solid（単純な一本線）以外にも、dotted（ドット線）やdouble（二重線）など色々ありますが、使用頻度が高いのはやはりシンプルでアレンジしやすいsolidなので、今回はsolidを使って解説していきます。

ちなみに、上記の例でborder-widthに該当する値は「thin（細い枠線）」です。このようにキーワード値で設定することもできますし、数値＋単位で設定することもできます。
言わずもがなだとは思いますが、border-colorに該当する値は「red（赤）」です。

以上を踏まえた上で、ここからはサンプルコードを見ながらborderプロパティで遊んでみましょう。

・サンプルコードその１：見出しに枠線をつける

冒頭でもやりましたが、まずは見出しにborderプロパティを使って枠線をつけてみましょう。以下がサンプルコードです。

<h1>見出しに枠線をつける</h1>

 h1 {
     border: solid thin blue;
   }

見出しに枠線をつける。

とりあえず枠線はつきましたが、borderプロパティはご覧のように要素の幅全体を囲みます。このままで良い場合もありますが、見出しの部分だけ囲みたい場合が多いですし、見出しと枠線の間隔が狭くて窮屈ですよね。ついでに、枠線の太さをもう少し太くしてみようと思います。

<h1>見出しに枠線をつける</h1>

 h1 {
     border: solid medium blue;
     width: fit-content;
     padding:10px;
   }

見出しに枠線をつける。

先ほどのサンプルコードと比べ、見た目的にだいぶ見やすくなりました。このように、borderプロパティを使って枠線を表示させる時はwidthやpaddingを同時に設定することが多いです。

・サンプルコードその２：表に枠線をつける

コーポレートサイトの会社概要ページなどでよく使われるのが、表（< table >タグ等）＋表の枠線（borderプロパティ）を使った一覧表示です。
表の枠線表示は意外と面倒くさいポイントが多く、「枠線を表示したいところに枠線が表示されない」というトラブルが起こることも珍しくないので注意が必要です。まずはサンプルコードをご覧ください。

  <table>
      <tr>
        <td>test</td><td>test2</td>
      </tr>
      <tr>
        <td>test3</td><td>test4</td>
      </tr>
    </table>

table {
        border-collapse: collapse;
        width:60%;
        background-color:lightyellow
      }
td {
  padding:10px;
  border: solid thin;
 }

test	test2
test3	test4

まず面倒くさいポイントその１ですが、サンプルコードにborder-collapse:collapse;という見慣れないCSSを設定しています。これは、セル同志をくっつけてセルの境界線を共有するか、セルを分けてセルの境界線を分離するかの設定で、border-collapse:collapse;は前者（セルの境界線を共有）の設定にするという指定です。
ブラウザによってはデフォルトがborder-collapse: separate;（分離）である場合もあるため、これを設定しておかないと枠線が思ったような表示にならない原因となってしまいます。

そして面倒くさいポイントその２ですが、borderプロパティとpaddingプロパティをtableタグではなくtdタグに設定しています。
tableタグはあくまで表の外枠を囲むものであるため、tableタグにborderを設定しても、外側の枠しか表示されません。（セル同士を区切る枠線が表示されないということです）
paddingの設定も同様で、外枠のtableタグに設定してもセルの内側の余白が確保されるわけではなく、あくまでセルそのものであるtdタグに設定する必要があります。

参考までに、border-collapse: separate; border-spacing:5px;になっていた場合のセルの枠線の表示をご紹介しておきます。

test	test2
test3	test4

表の枠線は表示されるけれど思ったような表示にならないという場合は、borderプロパティの値以外にも
・border-collapseの値はcollapseになっているか？
・表示させたい枠線に合わせて、正しいセレクタになっているか？（tableタグ、trタグ、tdタグ）
という点を確認してみましょう。

・サンプルコードその３：リストに枠線をつける

最後にリストに枠線をつけてみましょう。リストへの枠線表示は、メニューボタンなどに使えます。が、リストの枠線表示にも注意点があります。まずはサンプルコードをご覧ください。

    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>

      li {
        border:solid thin;
        padding: 10px;
      }

リスト1
リスト2
リスト3

枠線は表示されましたが、リストとリストの間の線が太くなってしまっているところがありますね。これは、リスト１のborder-bottomとリスト２のborder-top、リスト２のborder-bottomとリスト３のborder-topがそれぞれくっついてボーダーラインが二重になっているからです。

これを解消する方法は複数あるのですが、今回は
１）リストにborderを設定
２）最初のリスト以外、border-topを消すCSS設定を追加
という方法でやってみようと思います。以下のサンプルコードの新しく増えたCSSに注目してください。

    <ul>
      <li>リスト1</li>
      <li>リスト2</li>
      <li>リスト3</li>
    </ul>

      li {
        border:solid thin;
        padding: 10px;
      }

      li:not(:first-child) {
        border-top: none;
      }

リスト1
リスト2
リスト3

狙い通り、枠線の重なり表示がなくなって境界線の太さが均一になりました。

上記のサンプルコードでは、:not( ) と :first-child を組み合わせたセレクタ指定の応用を使っているので、意味がよく分からず混乱してしまうという方は、最初のliタグにclass名を追加して以下のように設定しても構いません。
・すべてのリストにborderを設定
・すべてのリストにborder-top:none;を設定
・最初のリストクラスにのみ、改めてborder-topを設定

borderを設定し、全てのborder-topを消し、そして最初のリストに関してはさらにborder-topを復活させる…というのがややこしいと思う方は、全てのリストにborder-right、border-left、border-bottomを設定した上で、最初のリストにのみborder-topを設定するという方法もあります。（設定したborderを消す手順を無くすことができます）

他にも方法は色々とあるので、自分なりのしっくり来る設定方法を色々と試してみるのも面白いと思います。

◆ borderのまとめ ◆

borderプロパティを使って、色々な要素に境界線をつけてみましたが、共通して言えるのは境界線をつければそれだけで見やすくなるというわけではないということです。
paddingを使って境界線との間を空けたり、背景色をつけたり、他のCSSと組み合わせてはじめてその効果を発揮します。
また、borderを設定して境界線をつけることにはデメリットもあります。たとえば、同じコンテンツの中でborderを多用すると境界が明確に区切られすぎて、違和感が出てしまったり逆に見づらくなったりします。

    <p>記事タイトル</p>
    <p>記事本文：ここにもborderっている？いらなくない？borderがありすぎると違和感がでます。</p>

      p {
        border: solid thin;
        background-color: lightyellow;
        padding: 10px;
        width: fit-content;
        margin-top:10px;
      }

記事タイトル

記事本文：ここにもborderっている？いらなくない？borderがありすぎると違和感がでます。

こんな感じで、「ない方がマシ」という場合も少なくないので多用には十分ご注意ください！

POINT!