CSS の <url> データ型は、画像やフォントなどのリソースへのポインターを記述します。 URL は background-image, cursor, list-style のような様々な CSS のプロパティで使用することができます。
URI か URL か？ URI と URL との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの場所を記述します。 URI はリソースの URL または名前 (URN) であることがあります。
CSS Level 1 では、 url() 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 url() の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは url() を CSS の <uri> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 url() は真に <url> のみを記述します。
構文
<url> データ型は url() 関数表記を使用して指定します。引用符なしでも、単一引用符または二重引用符で囲んでも書くことができます。相対 URL も使用することができ、そのスタイルシートの URL からの相対になります (ウェブページの URL ではありません)。
<a_css_property>: url("http://mysite.example.com/mycursor.png")
<a_css_property>: url('http://mysite.example.com/mycursor.png')
<a_css_property>: url(http://mysite.example.com/mycursor.png)
メモ: Firefox 15以降、 0x7e より大きな制御文字は、引用符で囲まない URL では許可されなくなりました。詳細は バグ 752230 をご覧ください。
例
.topbanner {
background: url("topbanner.png") #00D no-repeat fixed;
}
ul {
list-style: square url(http://www.example.com/redball.png);
}
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Values and Units Module Level 4 <url> の定義 |
編集者草案 | |
| CSS Values and Units Module Level 3 <url> の定義 |
勧告候補 | CSS Level 2 (Revision 1) から重要な変更なし |
| CSS Level 2 (Revision 1) <uri> の定義 |
勧告 | CSS Level 1 から重要な変更なし |
| CSS Level 1 <url> の定義 |
勧告 | 初回定義 |
ブラウザーの対応
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 基本対応 | Chrome 完全対応 1 | Edge 完全対応 あり | Firefox 完全対応 1 | IE 完全対応 3 | Opera 完全対応 3.5 | Safari 完全対応 1 | WebView Android 完全対応 1 | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 1 | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応