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)に画像を表示させる方法まとめ

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

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

関連記事

  • 2021.10.19

    HTMLでメールを送る「mailto:」の使い方【注意点も解説】

    HTML5

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

おすすめ記事

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.05.24

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

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!