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

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

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

+1

関連記事

  • 2021.05.14

    【CSS】backgroundで行う背景画像の複数指定

    CSS

  • 2021.05.12

    【HTML5】pタグの基本的な使い方やspanタグとの違いを解説

    HTML5

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

おすすめ記事

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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