【CSS】疑似要素での画像サイズのレスポンシブ化

CSSで「::before ::afterなどの疑似要素に設置した画像のサイズをレスポンシブ化したい」

という方向けに、この記事では、疑似要素内の画像サイズのレスポンシブ化の手順について解説しています。

レスポンシブ化

widthとheightでの大きさの指定には、%の単位が使用できないので、emまたはexの単位を使用します。

疑似要素の親要素がpxの単位で指定された大きさの場合も、疑似要素で%は使用できません。

この2つは相対的な指定の単位*のため、レスポンシブになります。また、1emは2exとほぼ同等の大きさです。

*例：emは1文字の高さを基準(1)とした単位、exは”x”の文字の高さを基準(1)とした単位

widthとheightに1emを指定した際の、画像の大きさの例が以下のものです。

サイトのファビコンをbefore疑似要素の背景に設置しました。

以上で紹介したコードが実際に動作しているページは、以下よりご覧いただけます。（投稿者ページ）

コードが使われている部分は、投稿者名の見出しの左側にあるアイコンです。

既に設置されている方もいると思いますが、疑似要素への画像の設置手順も解説します。必要ない方は読み飛ばしていただければ幸いです。

疑似要素に画像を設置する際、通常はcontentタグ内にurl(“”)の形で画像の場所を書き込みますが、

この方法で画像を設置するとwidthタグ、heightタグといった縦横のサイズの指定が効かなくなります。

そこで、contentタグの内容は空欄にしてbackground-imageタグを使った画像の設置方法を使用します。

コードの例

.example::before{

content:””; /*上で述べた理由のため、contentに内容は不要です。疑似要素を使用する際の必須タグです。*/

background-image:url(” 画像の場所 “); /*画像の場所をURLで指定します。*/

background-size:contain; /*containは疑似要素の領域に収まる大きさに、画像を自動で調節するプロパティです（縦横比は崩れない）*/

display:inline-block; /*画像と親要素の段落を変えたい場合はblockを指定します。*/

width: “”; /*疑似要素の領域の横の大きさを書き込みます。*/

height:””; /*疑似要素の領域の縦の大きさを書き込みます。*/

}

WordPressの場合、画像のURLは管理画面から”メディア”→”ライブラリ”に移動し、使用する画像をクリックした際に表示される“添付ファイルの詳細”の下の“リンクをコピー”の欄に表示されたURLを選択してコピーすることで取得できます。

記事は以上です。最後までお読みくださり、ありがとうございました。