【CSS Modules】url()関数の使い方
url()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
url()関数はCSSにおいて、画像ファイルやフォントファイルなど、外部にある様々なリソースをスタイルシートから参照し、ウェブページに適用するために使用される関数です。この関数は主に、CSSプロパティの値として使用され、指定された要素に外部リソースを読み込む役割を担います。
引数として、参照したい外部リソースの場所を示すURL（Uniform Resource Locator）を受け取ります。このURLは、CSSファイルからの相対パスで記述することも、ウェブサイトのルートからの絶対パスで記述することも可能です。また、非常に小さな画像などを埋め込む際には、ファイルを直接指定する代わりに、Base64エンコードされたデータURI形式でリソースの内容を直接記述することもできます。
具体的には、background-imageプロパティで背景画像を指定したり、list-style-imageプロパティでリストマーカーの画像を適用したり、@font-faceルール内でカスタムフォントファイルを読み込んだりする際によく利用されます。例えば、background-image: url("../images/hero.jpg");と記述することで、指定した画像ファイルを背景として要素に適用し、Webページのデザインに視覚的な要素を組み込むことができます。
url()関数は、Webサイトの見た目を豊かにし、ユーザーエクスペリエンスを向上させる上で不可欠な、非常に汎用性の高い機能の一つです。
構文(syntax)
1url('path/to/resource.ext');
引数(parameters)
url: <url>
- url: <url>: 指定するURL
戻り値(return)
url()関数は、外部リソース（画像ファイル、フォントファイルなど）へのパスを指定する際に使用され、そのリソースの場所を示すURL値を返します。