CSS - url()関数でURL(URI)を指定する方法

CSSでURL(URI)を指定する場合はurl()関数を使用します。

主に画像のURLを指定するときに使い、 一番使用頻度が高いのがbackground-image プロパティ、 他にはcursorプロパティ、list-styleプロパティなどで使用します。

url()関数の使い方

次のようにURL(URI)を指定します。

background-image: url(back.png);

background-image: url('back.png');

background-image: url("back.png");

url()の中は、引用符なし・シングルクォーテーション・ダブルクォーテーションのいずれもOKです。

パスの指定方法

パスの指定方法は、絶対パスと相対パスの２通りの方法があります。

絶対パス

WebのURLをそのまま指定する形で、次のように指定します。

background-image: url("https://test.com/img/back.png");

相対パス

現在のCSSファイルからみて、どの位置にあるのかを指定します。

次の３つのパス指定の違いはしっかりと理解しておく必要があります。

/* 1つ上の階層にある imgフォルダの中のback.pngファイル */
background-image: url("../img/back.png");

/* 同階層にあるimgフォルダの中のback.pngファイル */
background-image: url("img/back.png");

/* 同階層にあるback.png */
background-image: url("back.png");

相対パスの注意点

相対パスの場合は、スタイルシートのURLが基準となります。 WebページのURLではありません。

WebページとCSSファイルの階層（ディレクトリ）が違う場合は注意が必要です。