【左にロゴ+右にバナー群】ヘッダーの基本的な作り方

今日は、「左にロゴがあって右側にバナーが複数並んでいる」という、よく見るヘッダーのレイアウト方法について学んだので、その備忘録としてまとめたいと思う。心がけた点としては、以下の2点。
「1.インライン要素の余白バグ問題をクリアしていること」
「2.バナーの数によってデザイン（余白）が最適化されるようになっていること」

1.インライン要素の余白バグ問題をクリアしていること

まず初めに、インライン要素であるimg要素には、隣接すると謎の空白を生成するという一種のバグがある。検索するとこのバグ問題を解決するための情報が出てくるが、ここでは「そもそもバグが発生させない」という方向で進める。

余白バグを発生させないための手順

前提：実案件ではバナー画像はリンクになっていることが多いかと思うので、<a href="#"><img src="画像URL"></a>という形にする

事前準備として、バナー画像群をdivで囲んでクラスを与える。
クラス名の例：<div class="header-info">
次に、a要素にクラスを付与し、CSS側でdisplay: blockをかけてブロック要素化。（ブロック要素となったバナー画像は、この時点で一旦縦に積まれる）
クラス名の例：<a class="header-info-item">　//インライン要素は一旦ブロック要素化する
最後に親要素である<div class="header-info">に対して、flexbox:display;をかけることによって、縦に積まれたバナー画像群を横に並べる

この手順でいくと「インラインブロック要素が並ぶ」ことがなくなるので、そもそもバグが発生しない。

ちなみにインラインブロック要素では何がまずいのか？

上記で書いた通り、検索をしてみるとインライン要素横並びで発生する隙間をハック的な感じで消して対応している人が多いが、これは問題は無いのか？それに対する今の自分の理解は以下の通りである。

見た目と動作が正しければそれでもOK。ただ、インライン要素である画像は本来中身が無いものであり、そこに対してリンクを張るというのは厳密に言うとおかしい。ちゃんとリンクが動作するのはブラウザ側で補完してくれているからである。うーん、合ってるのかな？ま、ブロック要素にして組んでしまうに越したことはない、という結論。

2.バナーの数によってデザイン（余白）が最適化されるようになっていること

もう1点、気をつけたことは、バナーの数によって余白が可変となる様にしたという点。どういうことか？

last-childで余白の設定をすることの問題点

表現したいことは、「バナーの左に15pxの余白を取る」ということである。実現方法としてパッと思いつくのは、親要素であるdivに対して
last-child {margin-left: 15px}
と指定する方法かなと思うが、これには一点問題点がある。それはバナーが1つであった際でも、marginが発生してしまうという点である。たかが15px。多分デザインに影響することも少ない。が、理論上は必要の無い余白である。これを無くそうじゃないか！というのが今回の取り組みである。

隣接セレクタという選択肢

昨日知ったばかりの内容で恐縮ではあるが、こういう時にばっちりな実装方法として「隣接セレクタ」というものがある。書き方としては以下の通り。

.header-info-item + .header-info-item {margin-left: 15px;}

「＋」なんてついているので、前後ともにmarginが適用されそうなものであるが、これは
「header-info-itemに隣接するheader-info-itemに対してmarginをかける」
ということである。そうすると、header-info-itemが複数ある場合は、marginが発生するが、header-info-itemが1つしかない場合はmarginが発生しないということになり、バナーが1つの時は余白を発生させないという目的を達成することが出来るのである。