URL / URI（リソースの指定）

URLは「Uniform Resource Locator」の略でリソースを示すポインタです。関数表記 url() で指定します。 () 内にURLやファイルの場所を記します。 ()内のURLやファイルの場所は、引用符 "（ダブルクォーテーション）や '（シングルクォーテーション）で囲むことができます。省略することもできます。

body要素の背景画像を指定しています。以下は同じ意味です。

example

body { background: url("http://pata2.jp/***.gif") }
body { background: url('http://pata2.jp/***.gif') }
body { background: url(http://pata2.jp/***.gif) }

一部のCSS context（@importなど）ではurl()を使用せずに文字列だけで指定することも可能です。

example

@import url("***.css");
@import "***.css"

注意：引用符なしのURL内に含まれる括弧、空白文字、単一引用符（'）、二重引用符（"）はバックスラッシュ（\）でエスケープする必要があります。

example

url(open\(parens)
url(close\)parens)

URLの種類によっては、URLエスケープ（URLエンコード、パーセントエンコーディング）として書き込むこともできます。

example

url(open%28parens) 
url(close%29parens)
記号とURLエンコード対応表（一部）
記号!"#$%&'()
コード%20%21%22%23%24%25%26%27%28%29

三角矢印相対URLでの指定も可能です。相対URLはベースとなるURL（スタイル付けしたソース文書のURLではなくスタイルシートのURL）で完全なURLに置き換えられます。

example

body { background: url("***.gif") }

上の例が次のスタイルシートで指定されていたとしたら、

http://pata2.jp/style/basic.css

ソース文書のbody背景は以下のgif画像で埋め尽くされることになります。

http://pata2.jp/style/***.gif

<body>を含むソース文書には、そのURLに関係なく同じgif画像が使用されます。
上に戻る