【 HTML/CSS】並んだ要素に均一にボーダーを引く例

Flexを使って横並びにした要素に均一の左右縦ボーダーを引く例です。

横並びメニューなどでよく左右にボーダーがついてる場合、全ての要素に左右ボーダーとしてborder-leftとborder-rightを指定してしまうと、隣合わせの要素のボーダーが二重になって太くなってしまいます。

そんな時は左右どちらかのボーダーだけ指定して、足りない部分のボーダーだけ擬似クラス｢first-child｣や｢last-child｣で対応すると良いかもしれません。

上記の例ではlast-childで最後の要素だけ分かりやすく色を変えて太くしています。HTMLのタブに切り替えてコードを見れます。

他にも隣接セレクタを使って、隣合う要素の場合だけ片方のボーダーにするという方法も考えられますね。

また、nth-childなどで何番目かの要素だけ指定を変えたり、偶数奇数で指定してりも出来ます。

疑似セレクタや隣接セレクタなどCSSの要素指定の方法について理解すると様々な応用が効きます。

ぜひ理解して活用してください。

リンク

リンク

リンク