CSS HTML5

2021.02.06

【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

タイトルやテキストの文頭にアイコンをつける装飾は、Web制作ではかなりの頻度で使うデザインです。
例)よくある質問のQAアイコン、チェックリストの矢印など

テキストの文頭にアイコンが入っているだけでWebサイトが明るくなります。

テキストの文頭に画像を入れる場合、疑似要素のbeforeやafterを使うのが便利です。

疑似要素については以下記事をご参考ください。

今回はこの疑似要素(before, after)に画像を表示させる方法をご紹介します。

疑似要素(before,after)に画像を表示させる1番シンプルな方法

まずは、疑似要素(before,after)に画像を表示させる最もシンプルな方法をご紹介します。

以下コードをご覧ください。

See the Pen 疑似要素に画像表示(シンプル) by spiqa design (@spiqa_design) on CodePen.

「content」に示させたい画像のURLを指定します。

後は、「margin-right」で画像とテキスト間の余白を調整し、「vertical-align」で画像の上下位置を調整します。

たったこれだけです!とても簡単ですね。

しかし、この方法ではサイズがピッタリな画像を入れなければなりません。上記コードに「width」と「height」を指定しても効かないのです。

上記コードでは、幅15ピクセル×高さ15ピクセルのピッタリな画像を入れているのできれいに表示されていますが、これを幅40ピクセル×高さ40ピクセルの画像に変えてみましょう。

See the Pen 疑似要素に画像表示(失敗例) by spiqa design (@spiqa_design) on CodePen.

画像が大きすぎて崩れてしまっています。

「width: 15px;」と「height: 15px;」を指定していますが、効いていないのがわかります。

疑似要素(before,after)に表示させた画像のサイズを変更する方法

上記が最もシンプルな方法ですが、テキストのサイズが変更になった時にまたピッタリなサイズの画像に差し替えるのは面倒ですね…

そこで、画像サイズもCSSで変更可能な方法をご紹介します。

See the Pen 疑似要素に画像表示(サイズ変更可能) by spiqa design (@spiqa_design) on CodePen.

「content」に画像URLを入れるのではなく、backgroundで背景として画像を表示させます。

幅40ピクセル×高さ40ピクセルの画像を入れていますが、CSSの「width: 15px;」と「height: 15px;」が効いてピッタリのサイズになっています

右上の「Codepen」をクリックすると上記コードを編集できる画面に飛ぶので試しに「width」と「height」のサイズを変えてみてください。

疑似要素(before,after)に画像を表示させる方法まとめ

背景で画像を表示させる方が応用が効くので、基本そちらを使用することおすすめします。

上記コードをコピペしてご活用ください!

関連記事

  • 2022.02.25

    【CSS】グーやパーに変形!マウスカーソルに掴む動作を実装する方法

    CSS

  • 2022.02.08

    チェックボックスで1つしかチェックさせない方法

    HTML5

    JavaScript

  • 2022.02.03

    Androidだけ崩れる!AndroidにだけCSSを効かせる方法

    CSS

    JavaScript

おすすめ記事

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.06.08

    簡単!蛍光ペンっぽいアンダーラインを引く方法

    CSS

    WordPress

WPサービス

×