【CSS Modules】image()関数の使い方
image()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
image()関数は、CSSプロパティで利用する画像を定義・参照する関数です。主にbackground-imageプロパティなどで、要素の背景として表示する画像を柔軟に指定するために使用されます。
この関数を使用すると、単一の画像ファイルのURLを指定するだけでなく、複数の画像ソースをフォールバック（代替）として指定することが可能です。例えば、カンマ区切りで複数の画像URLを記述した場合、ブラウザはリストの先頭から順に画像をロードしようとし、最初に見つかった有効な画像を適用します。これにより、特定の画像形式がブラウザでサポートされていない場合や、画像ファイルが見つからない場合に備えて、別の画像を表示させるといった柔軟な対応が可能になります。
また、image()関数は、linear-gradient()やradial-gradient()といったCSSグラデーション関数を直接その引数として受け入れることができます。これにより、CSSで定義されたグラデーションを、まるで通常の画像ファイルであるかのように扱うことができ、デザインの表現力を高めます。
この関数は、単に画像ファイルのパスを指定するだけでなく、より堅牢で動的な画像表示を実現するための強力なツールとして、CSSデザインにおいて柔軟な画像指定を可能にします。
公式リファレンス: image()
構文(syntax)
1.example-element { 2 background-image: image(url("path/to/your-image.png")); 3}
引数(parameters)
[ <image-set-listing> | <image-resource> ] [ , <color> ]?
- <image-set-listing> | <image-resource>: 表示する画像または画像セットを指定します。
- <color>?: 画像が表示されない場合の代替色を指定します。
戻り値(return)
<image>
image() 関数は、画像リソースを表す <image> 型の値を返します。これは、CSS で表示できる画像データであることを示します。