こんにちは、ryohei（@ityryohei）です！
見出しや文章の先頭に画像を表示する方法のご紹介です。見出しや文章の先頭に画像を入れることで、ページ内に変化を付けたり、一部を目立たせたり、リスト形式で表示させたりと便利に使うことができます。
本記事の内容
- contentで要素の先頭に画像を入れる
- background-imageで要素の先頭に画像を入れる
では、解説していきます。
contentで要素の先頭に画像を入れる
contentプロパティは、要素の前後に画像やテキストといったコンテンツを表示する際に使用します。疑似要素の「: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 | Imge Before01 by ryoy (@intotheprogram) on CodePen.
上記では「:before」の疑似要素にcontentのプロパティを記述して、画像のパスを指定しました。contentを使うと画像を先頭に追加することが簡単にできます。
しかし、画像とテキストの間隔が狭いため、見た目はあまり良くありませんね…。positionを指定して、画像の位置を調整しましょう。
1contentで画像の位置を調整する
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 | Imge Before02 by ryoy (@intotheprogram) on CodePen.
positionとmarginを指定することで、適度な余白が生まれました。ずいぶん見やすくなったのではないでしょうか。
ただ、1行目と2行目の行頭が揃っていないため、2行表示された際に不格好になっていますね。もう少し工夫して行頭を揃えてみましょう。
2contentで画像を入れた際に行頭を揃える
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 | Imge Before03 by ryoy (@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 | Imge Before04 by ryoy (@intotheprogram) on CodePen.
background-imageでは細かい位置やサイズの調整が可能となります。（左の余白はpaddingで設定しています。）
見出しや文章の先頭に画像を設定する場合はbackground-imageの方が簡単かつ便利なので、基本的にはbackground-imageを使用して頂ければ問題ありません。ただ、疑似要素とcontentで書いた方が短く済むようであれば、contentを活用するのも良いかもしれませんので、状況に合わせて適宜選択していたければと思います。
以上、CSSで見出しや文章の先頭に画像を入れる方法のご紹介でした！
