content プロパティに画像を設定するコードを紹介します。
概要
こちらの記事では、contentプロパティを利用して要素の前後に文字を挿入するコードを紹介しました。
状況によっては、contentプロパティに文字ではなく画像を表示ししたい場合があります。
この記事では、contentプロパティに画像を設定するコードを紹介します。
書式
次の書式を利用します。
content: url('画像のURLまたはパス');
実装例・サンプルコード
コード
下記HTMLファイルとCSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="image-content.css" />
</head>
<body>
<span class="Frame1">コンテンツ1aです。</span>
<span class="Frame1">コンテンツ1bです。</span>
<div class="Frame1">コンテンツ2です。</div>
<span class="Frame2">コンテンツ3aです。</span>
<span class="Frame2">コンテンツ3bです。</span>
<div class="Frame2">コンテンツ4です。</div>
</body>
</html>
.Frame1::before {
display:inline-block;
width: 32px;
content: url('image.svg');
}
.Frame2::after {
display: inline-block;
width: 32px;
content: url('image.svg');
}
画像のimage.svgは下図を用意しました。
解説
Frame1では、
before疑似クラスを利用して要素の手前に画像を表示するスタイル設定を記述しています。
contentに画像を指定した場合は、領域のサイズが画像の大きさでは確保されないため、
widthプロパティで明示的に領域のサイズを指定する必要があります。領域のサイズを明示的に指定するため、
displayプロパティは、inlineではなく、
blockまたは
inline-blockを設定します。
今回の例では、inline-blockを指定して、横幅32pxの画像表示領域を確保しています。
.Frame1::before {
display:inline-block;
width: 32px;
content: url('image.svg');
}
Frame2では、
after疑似クラスを利用して要素の後に画像を表示するスタイル設定を記述しています。
こちらもFrame1と同様に、displayプロパティにinline-blockを設定し、widthプロパティで領域の横幅を
指定しています。
.Frame2::after {
display: inline-block;
width: 32px;
content: url('image.svg');
}
実行結果
HTMLをWebブラウザで表示します。下図のページが表示されます。
spanやdivの要素の手前や直後に画像が表示されました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-07-02
作成日: 2024-04-24
