CSSのcontentで画像を指定してサイズ調整する方法!

CSSのcontentで画像を指定してサイズ調整する方法についてサンプルコード付きで解説します。CSSのcontentで画像を指定すると、widthやheightプロパティでサイズを調整することができません。ではどのようにすればサイズ調整できるのかを紹介します。

コンテンツ [表示]

  1. 1CSSのcontentプロパティで画像を指定する方法
  2. 2CSSのcontentプロパティで画像を指定してサイズ調整する方法
  3. 3まとめ

CSSのcontentプロパティで画像を指定する方法

まずCSSのcontentプロパティで画像を指定する方法について解説します。

適当なHTML要素を作っていただき、それに対して擬似要素をCSSにて記述します。

そして::beforeの擬似要素のcontentプロパティでurl(画像のpath)を記述します。

上記のように画像を表示させることができます。

あわせて読みたい
content
CSSのcontentプロパティは文字や画像、カウンターの値などを要素の前後に追加できるプロパティです。contentプロパティの構文や使い方をサンプルコード付きで解説します。
あわせて読みたい
::before
CSSの::beforeは疑似要素の一つで対象のセレクターの子要素の最初の要素として擬似的な要素を生成します。contentプロパティとよくセットで利用されますが、その使い方をサンプルコード付きで解説します。

CSSのcontentプロパティで画像を指定してサイズ調整する方法

CSSのcontentプロパティで画像を指定してサイズ調整する方法について解説します。

contentプロパティで画像を指定するとwidthheightプロパティが使えません。

ではサイズを変更したい場合どうするかというと、transformプロパティのscale()で拡大・縮小させます。

では1つ目のサンプルコードの画像を1/2の大きさに縮小させてみます。

このように画像の大きさが半分に縮小されました。

また縮小、拡大させる時には必ずdisplayプロパティでblockまたはinline-blockを指定してください。

そうでないと拡大、縮小がされませんのでご注意下さい。

まとめ

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

ぜひここで紹介した方法を用いて、CSSのcontentで画像を指定してサイズ調整してみてください。

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

Qumeru

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

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

関連記事

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

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

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

目次

西村卓也
ライター

西村卓也

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