【CSS】擬似要素で画像を入れる方法

CSSの擬似要素を使用して画像をウェブページに追加する方法は、デザインにおいて非常に便利なテクニックです。この記事では、擬似要素 ::before と ::after を利用して画像を追加する基本的な手順を紹介します。
CSSの擬似要素とは何かの基本的な記事については、こちらの記事をご覧ください。
【CSS擬似要素】::beforeと::afterの基本の使い方について

::beforeと::afterの違い

CSSの擬似要素「::before」と「::after」は、ウェブページにおいて、特定の要素の前や後に追加のコンテンツを挿入する便利な方法です。これらの擬似要素を利用することで、追加のHTMLを書かずに、ページに装飾的な要素やテキストを加えることができます。
まずは「::before」と「::after」の基本的な違いと使い方について確認します。

「::before」って何？

「::before」は、選んだ要素のコンテンツの前に新しいコンテンツを加えるために使います。つまり、要素が始まるところ、開始タグのすぐ後に何かを挿入したいときに便利です。たとえば、文章の始まりに特別なアイコンを置いたり、リストの各項目の前にチェックマークを表示させたりすることができます。

「::after」って何？

「::after」は、その名の通り、選んだ要素のコンテンツの後に新しいコンテンツを加えます。これは、要素が終わるところ、終了タグの直前に何かを追加したい場合に使います。文章やリストの後ろに注釈をつけたり、セクションの最後に装飾的な要素を入れたりするのに役立ちます。

使用例

下記CSSコードは、.box というクラスを持つ要素の内容の前に「《」を、後ろに「》」を追加します。これによって、.box 要素の中身がこの記号で囲まれることになります。

.box::before { 
    content: "《";
}
.box::after { 
    content: "》";
}

基本的な手順

CSSの擬似要素 ::before と ::after は、選択した要素の内容の前後にコンテンツを追加するために使用されます。画像を追加するには、content プロパティに url() 関数を使用して画像のパスを指定します。

HTMLの準備

まずは、画像を挿入したい要素をHTMLに用意します。

<div class="container">画像が入る要素のコンテナです。</div>

擬似要素で画像を追加（サイズ非可変）

次に、CSSを用いて ::before や ::after 擬似要素を使って画像を追加します。

.container::before {
    content: url('path/to/image.jpg');
    display: block;
}

このコードは、.container 要素の前に画像を追加します。display: block; （あるいはdisplay: inline-block;） は、画像が正しく表示されるようにするために必要です。
ただし、この方法では疑似要素の画像サイズを変えることができません。

.container::before {
    content: url('path/to/image.jpg');
    display: block;
    width: 50px;
    height: 50px;
}

擬似要素の背景画像として画像を追加（サイズ可変）

画像を背景として追加する場合、position と z-index を使用して調整することができます。
擬似要素で大きさを設定し、背景画像として追加することで、サイズが変更できる擬似要素画像になります。

.container::before {
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: red;
    background-image: url('path/to/background-image.jpg');
    background-position: center;
    background-size: contain;
}

このコードでは、.container の手前に画像を追加しています。background-size: contain; は画像が幅50px・高さ50pxの擬似要素内にぴったり収まるようにしています。

擬似要素にはposition: absolute;を使ってデザインの幅を広げることもできるため、興味のある方はこちらの記事もご覧ください。
【CSS】position: absolute;の使い方とエラーの対処法

記事名

まとめ

CSSの擬似要素を利用することで、JavaScriptを使わずにHTMLに画像を追加することが可能です。これにより、ページの読み込み時間を短縮し、パフォーマンスを向上させることができます。また、装飾的な要素を追加する際にも便利です。擬似要素を使った画像の追加は、ウェブデザインの幅を広げる有効な手段です。