HTML と CSS だけで見出しにアイコンを付ける

まず結果を見たい人向け

ソースコードとサンプル

作りたいもの (要件)

• <h1> とか <h2> とかの左に画像でアイコンを挿入したい.
• アイコンがない見出しも使うことがある (全ての見出しにアイコンを付けるわけではない) のでそのへんは柔軟にしたい.

実装解説

HTML にはアイコンあり見出しとアイコンなし見出しを用意した.
ポイントは, アイコンありの際には見出し文のところを直打ちではなく <span> 等で包み, <h1> の小要素とするところ. 要件の 2 番目の柔軟性を実現するために重要となる.

index.html

<h1>
  <img src="{画像ファイルへのパス}" />
  <span>This is Heading 1A<br />(with Icon)</span>
</h1>

<h1>This is Heading 1B<br />(without Icon)</h1>

下準備として <h1> の CSS を好きに改変. デフォルトのスタイルで良いなら position: relative; 以外は特に必要ない.

style.css

* {
  box-sizing: border-box;
}

h1 {
  position: relative; /* これのみ必須. relative は通常の位置を基準にする. */
  min-height: 42px;
  line-height: 36px;
  font-size: 32px;
  padding: 3px 6px;
  border-bottom: 2px solid #000;
}

次に画像を配置. left, width, height は好きに設定して良い.

ポイントは, top: 50%; は "参照座標の" 高さ 50% を意味するのに対し, transform: translateY(-50%); は "自身の" 高さ 50% を意味するという点.
top: 50%; によって <img> 要素の上辺が <h1> 要素の上下中央と一致する. そのあと transform: translateY(-50%); によって <img> 要素の高さ半分だけ上に戻して, 結果的に <img> 要素の上下中央と <h1> 要素の上下中央を一致させることができる.
position: absolute; は <img> 要素の座標基準として <h1> 要素を使用するために設定している.

style.css

h1 > img {
  position: absolute; /* absolute は祖先要素のうち position が static (初期値) 以外に設定されている要素の左上を基準にする. この場合親要素の h1 の左上が基準となる. */
  top: 50%; /* h1 の左上から下方向に h1 の高さの 50% 下げる. */
  left: 6px;
  transform: translateY(-50%); /* 現在の位置から h1 > img の高さの -50% 下に移動, つまり 50% 上に移動. */
  width: 32px;
  height: 32px;
}

最後に <span> 要素のスタイルを設定する. padding-left の値は <img> 要素の幅などを踏まえて自由に指定して良い.
ここで, h1 > span ではなく h1 > img + span とすることで, <h1> 要素の直下で <img> 要素の直後にある <span> 要素のみを対象とできる. つまり <h1><span>~~~~</span></h1> のような HTML の <span> 要素はこのセレクタでは対象とならない.

style.css

h1 > img + span {
  display: inline-block; /* inline (初期値) では複数行に渡る場合にアイコンの上に文字が乗ってしまう. */
  padding-left: 46px;
}