【CSS】h1、h2タグ(見出し)の文字横に画像を表示

この記事では、CSSでh1、h2タグの文字横に画像を入れる方法とソースコードについてまとめました。。

## h1、h2タグの文字の左横に画像挿入

凝った見出しを作りたい場合、文字列の横に画像を入れたりします。
(例)

その場合、CSSでは主に2通りの方法があります。

## 方法① 疑似要素:beforeを使用

疑似要素:beforeを使うことでシンプルに記述できます。

h3:before {
  content: url("bg.jpg");
}

h3の前に指定した画像ファイルを挿入します。

## 方法② background-imageとpaddingを利用

昔からよく使われているスタンダードなやり方です。

h2 {
  background-image: url("bg.jpg");
  background-size: 30px 30px; /* 画像サイズ */
  background-repeat: no-repeat; /* 繰り返し表示オフ */
  padding: 0px 0px 0px 60px; /* 画像と重ならないように文字列を右に移動 */
}

見出しタグに背景画像を設定し、文字をズラして重ならないようにします。