【CSS】見出しや文章の先頭に画像を入れる【行頭を揃える】

こんにちは、Ryohei（@ityryohei）です！

本記事では、見出しや文章の先頭に画像を表示する方法をご紹介しています。

見出しの先頭に画像を表示したいんだけど、良い方法ないかな？

上記の疑問にお答えます。

では、解説していきます。

contentで要素の先頭に画像を入れる

contentは、要素の前後に画像やテキストといったコンテンツを表示する際に使用するCSSプロパティです。疑似要素のbeforeもしくはafterに指定することでコンテンツを表示することができます。

contentで見出しや文章の先頭に画像を表示する場合は下記のように記述します。

HTML

<h1 class="title">Lorem Ipsum is simply dummy text</h1>

CSS

.title:before {
  content: url('../images/icon/sample.png');
}

DEMO

See the Pen CSS | Image Before01 by ryohei (@intotheprogram) on CodePen.

上記では疑似要素のbeforeにcontentを指定し、値に画像のパスを指定しています。contentを使うと画像を先頭に追加することが簡単にできます。

しかし、そのままだと画像とテキストの間隔が狭いため、見た目はあまり良くありません……なのでpositionを指定して画像の位置を調整しましょう。

contentで画像の位置を調整する

CSS

.title:before {
  position: relative;
  top: 5px;
  margin: 0 10px 0 0;
  content: url(//into-the-program.com/assets/images/icon/icon_clip.png);
}

DEMO

See the Pen CSS | Image Before02 by ryohei (@intotheprogram) on CodePen.

positionとmarginを指定することで、適度な余白が生まれました。ずいぶん見やすくなりましたね！

ただ、1行目と2行目の行頭が揃っていないため、2行表示された際に不格好になっています。少し工夫して行頭を揃えてみます

contentで画像を入れた際に行頭を揃える

CSS

.title {
  position: relative;
  padding: 0 0 0 40px;
}

.title::before {
  position: absolute;
  top: 5px;
  left: 0;
  content: url(//into-the-program.com/assets/images/icon/icon_clip.png);
}

DEMO

See the Pen CSS | Image Before03 by ryohei (@intotheprogram) on CodePen.

paddingで設定した余白の上にpositionで画像を置くことで行頭を揃えてみました。2行表示された場合もすっきりしていますね。

このように、疑似要素にcontentを指定することで簡単に画像やテキストを表示することができます。ただ、便利な半面、下記のような注意点があります。

contentの注意点

画像サイズを指定することはできない（原寸大での表示のみ）
contentで表示されるテキストや画像はコピー&ペーストができない

見出しや文章の先頭に画像を表示する分には問題はないと思いますが、contentを使用する際は上記の注意事項を理解した上でご検討ください。

background-imageを使う

contentの他に、見出しや文章の先頭に画像を表示する方法になります。background-imageを使って、見出しや文章の先頭に背景画像が配置されるように設定します。

HTML

<h1 class="title">Lorem Ipsum is simply dummy text</h1>

CSS

.title {
  padding: 0 0 0 40px;
  background-image: url(//into-the-program.com/assets/images/icon/icon_clip.png);
  background-repeat: no-repeat;
  background-position: 0 5px;
}

DEMO

See the Pen CSS | Image Before04 by ryohei (@intotheprogram) on CodePen.

background-imageでは細かい位置やサイズの調整が可能となります。（左の余白はpaddingで設定しています。）

見出しや文章の先頭に画像を設定する場合はbackground-imageの方が簡単かつ便利なので、基本的にはbackground-imageを使用して頂ければ問題ありません。ただ、疑似要素とcontentで書いた方が短く済むようであれば、contentを活用するのも良いかもしれませんので、状況に合わせて適宜選択していたければと思います。

以上、CSSで見出しや文章の先頭に画像を入れる方法のご紹介でした！