url()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

url() は CSS の関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、Blob URL、データ URL の何れかです。 url() 関数は attr() 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートのいずれかになります。url() 関数記法は <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> のみを記述します。

css
/* 単純な使い方 */
url("https://example.com/images/myImg.jpg");
url('https://example.com/images/myImg.jpg');
url(https://example.com/images/myImg.jpg);
url("data:image/jpg;base64,iRxVB0…");
url(myImg.jpg);
url(#IDofSVGpath);

/* 関連するプロパティ */
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("my-icon.jpg");
cursor: url(my-cursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantastic-font.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");

/* 代替付きのプロパティ */
cursor: url(pointer.cur), pointer;

/* 関連する一括指定プロパティ */
background: url('star.gif') bottom right repeat-x blue;
border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;

/* 他の CSS 関数の引数として */
background-image: cross-fade(20% url(first.png), url(second.png));
mask-image: image(url(mask.png), skyblue, linear-gradient(rgb(0 0 0 / 100%), transparent));

/* 一括指定ではない複数の値の一部として */
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);

/* アットルール */
@document url("https://www.example.com/") { /* … */ }
@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);

相対 URL が使用された場合は、スタイルシートの URL からの相対となります (ウェブページの URL からではありません)。

url() 関数は background, background-image, border, border-image, border-image-source, content, cursor, filter, list-style, list-style-image, mask, mask-image, offset-path, clip-path, @font-face ブロック内での src, @counter-style/symbol の値として使用することができます。

構文

値

<string>

URL まだは SVG 図形の ID を指定することができる文字列です。

url

含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。

css
<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)

URL を引用符なしで書く場合は、バックスラッシュを (\) を URL に含まれる括弧、ホワイトスペース文字、単一引用符 (')、二重引用符 (") の前に使用してください。

パス

SVG 図形または　SVG フィルターの ID への参照です。

<url-modifier>

将来的には、url() 関数で修飾子、識別子、または関数記法を指定して、URL 文字列の意味を変更できるようになるかもしれません。これはサポートされておらず、仕様書でも完全に定義されていません。

形式文法

url( <string> <url-modifier>* )

例

background プロパティで使用される URL

css
body {
  background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
    #00d no-repeat fixed;
}

リストの先頭記号として使用される画像を読み込む URL

css
ul {
  list-style: outside
    url("https://mdn.github.io/shared-assets/images/examples/firefox-logo.svg");
}

content プロパティの使用

HTML

html
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

CSS

css
li::after {
  content: " - "
    url("https://mdn.github.io/shared-assets/images/examples/star-white_16x16.png");
}

結果

データ URL の使用

CSS

css
body {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
}

フィルターでの使用

URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。

  1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。
  2. SVG がページ内にある場合は、フィルターの ID。
css
.blur {
  filter: url(my-file.svg#svg-blur); /* フィルターとして使用する SVG ファイルの URL */
}

.inline-blur {
  filter: url(#svg-blur); /* HTML ページに埋め込まれた SVG の ID */
}

仕様書

Specification
CSS Values and Units Module Level 4
# urls

ブラウザーの互換性

BCD tables only load in the browser

関連情報