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画像が使用されます。

上に戻る