【CSS Modules】url型の使い方
url型の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
url関数はCSSにおいて、画像ファイルやフォントファイル、あるいは他のスタイルシートといった外部のリソースへのパスを指定するために使用される関数です。この関数は、background-imageプロパティで背景画像を設定したり、list-style-imageプロパティでリストマーカーに画像を指定したりする際によく利用されます。また、@importルールを用いて別のCSSファイルを読み込んだり、@font-faceルールでカスタムフォントを定義する際にフォントファイルの場所を指定したりと、CSSで外部リソースを参照する際に不可欠な要素です。
記述形式はurl(パス)となります。パスはシングルクォーテーション（'）またはダブルクォーテーション（"）で囲むことができますが、スペースや特定の特殊文字が含まれるパスの場合には、誤作動を防ぐために引用符で囲むことが強く推奨されます。指定できるパスには、現在のスタイルシートファイルからの相対パス、ウェブサイトのルートディレクトリからの絶対パス、またはインターネット上の完全なURL（絶対URL）があります。相対パスで記述された場合、そのパスはCSSファイルが配置されている場所を基準として解決されます。url関数は、CSSの表現力を高め、多様なデザインを実現するために非常に重要な役割を担っています。
公式リファレンス: <url>
構文(syntax)
1background-image: url("path/to/image.png");
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません