枠線の表示手段まとめ

枠線を表現するのに、いくつか方法がありますのでまとめます。

1. borderで指定する
2. box-shadowで指定する
3. 擬似要素(::after)を使って、borderを指定したboxを重ねる
4. 親要素に背景色を指定して、線幅分の余白を指定して、子要素に白(背景と同じ色)を指定する。

See the Pen 枠線の表示方法 外枠 by yuming (@yuuuming) on CodePen.

1. borderで指定する

一番スタンダードな指定方法ですね。問題なければ、普通にこの方法をとりたいです。

注意すべき点

複数カラムでレイアウトしたい場合、要素の幅設定（box-sizing=”border-box”）を指定しておかないと、%指定がうまくいきません。

例）
3つ箱を横に並べる場合は、幅33.33%にしますが、box-sizing=”contents-box”では、borderで指定した幅分が含まれないので、カラム落ちします。

2. box-shadowで指定する

本来は影のスタイルを指定するプロパティですが、ぼかし無しで指定することで枠線に見せます。borderに近い感覚で指定できます。重ねて指定することで、多重の枠が表現できます。

なお、box-shadowは要素の幅指定には関係しません。ウィンドウ幅に影響されて線幅が小数点になることはないため、ウィンドウ幅変更による表示の欠けの問題はクリアできます。

注意すべき点

外側指定の場合、四隅が微妙に角丸になります。

また、親要素にoverflow:hidden;が設定されていると、枠線が見切れるため、親要素との余白の調整が必要となります。もしくは内側（inset）に設定して、枠が内容に被る分は調整必要です。

3. 擬似要素(::after)を使って、borderを指定したboxを重ねる

１または２で解決できない場合はこの方法が良いかと思います。

注意すべき点

擬似要素は子要素として、要素の内側に表示されるので、重なり順や他子要素との兼ね合いに注意してください。

4. 親要素に背景色を指定して、線幅分の余白を指定して、子要素に白(背景と同じ色)を指定する。

子要素が透過度０の場合はこの方法も使用できますね。枠線にパターンやテクスチャをつけたい場合はこの方法で実現できます。

注意すべき点

子要素の背景を透過したい場合は使えません。

間に垂線を表示して格子状にする場合

親要素（ulなど）の中に複数の子要素(ilなど)を横に並べるような場合、間に垂線を表示して格子状にする方法も色々です。

1. li（もしくはliの子要素）にborderをつける
2. ulにborderをつけて、間の線は、liにborderをつける
3. ulにborderをつけて、間の線は、擬似要素（li::after）で表示する

See the Pen 枠線の表示方法　格子 by yuming (@yuuuming) on CodePen.

1. li（もしくはliの子要素）にborderをつける

間の枠線が重複するため、枠を重ねるようにネガティブマージンを設定します。もしくは間の枠線の片方を無くします。

2. ulにborderをつけて、間の線は、liにborderをつける

外枠は親要素(ul)にborderを指定し、間の線は、liにborderを指定します。

3. ulにborderをつけて、間の線は、擬似要素（li::after）で表示する

外枠は親要素(ul)にborderを指定し、間の線は、擬似要素の背景色で表現します。