疑似要素で設定した画像のサイズを変更する方法を紹介!

疑似要素で設定した画像のサイズを変更する方法を紹介についてサンプルコード付きで解説します。疑似要素で設定した画像のサイズを変更するにはcontentプロパティにimgを設定するのではなく、背景画像として擬似要素に画像を設定します。では詳しく見ていきましょう。

コンテンツ [表示]

  1. 1疑似要素で設定した画像のサイズを変更したい
  2. 2疑似要素で設定した画像のサイズを変更する方法
  3. 2.1注意点
  4. 3まとめ

疑似要素で設定した画像のサイズを変更したい

画像の横にタイトルを記述しているのをよくWEBページで見かけますが、CSSの擬似要素を用いて実装することが出来ます。

下記のサンプルコードを見てみましょう。

擬似要素のcontentプロパティに直接、画像パスをurl関数で記述することで、疑似要素で画像を表示することが出来ます。

一方で今回widthプロパティとheightプロパティを50pxと小さめのサイズで指定していますが、効いていないのが確認できます。

では疑似要素で設定した画像のサイズを変更するにはどうしたらいいのか、以下の項目で解説します。

疑似要素で設定した画像のサイズを変更する方法

疑似要素で設定した画像のサイズを変更するには::before::aftercontentプロパティに直接画像パスを記述するのではなくて、background-image(背景画像)として画像パスを記述します。

ではサンプルコードを通して確認してみましょう。

このように背景画像として画像パスを記述することで、画像の大きさを変えることができます。

注意点

ここで注意点として、画像の大きさを変えるためには必ずdisplayを初期値のinlineではなくinline-blockまたはblockとしてください。

そうでないとwidthheightプロパティが効きません。

またbackground-size: containとすることで、画像の縦横比を維持したまま、擬似要素で指定した大きさになってくれるので、指定した方がいいでしょう。

もしbackground-sizeを指定してないと画像が表示されません。

まとめ

いかがでしたでしょうか?

もし疑似要素で設定した画像のサイズを変更する場合はここで紹介したように、背景画像として画像パスを記述してください。

ぜひここで紹介した方法を用いて、疑似要素で設定した画像のサイズを変更させてみてください。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。