url()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
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> のみを記述します。
相対 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 の値として使用することができます。
構文
/* 単純な使い方 */
url("/api/flow.js?q=https%3A%2F%2Fexample.com%2Fimages%2FmyImg.jpg");
url('/api/flow.js?q=https%3A%2F%2Fexample.com%2Fimages%2FmyImg.jpg');
url(/api/flow.js?q=https%3A%2F%2Fexample.com%2Fimages%2FmyImg.jpg);
url("/api/flow.js?q=data%3Aimage%2Fjpeg%3Bbase64%2CiRxVB0%25E2%2580%25A6");
url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2FmyImg.jpg);
url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Furl_function%23IDofSVGpath);
/* 関連するプロパティ */
background-image: url("/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fstar.gif");
list-style-image: url('/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2Fimages%2Fbullet.jpg');
content: url("/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fmy-icon.jpg");
cursor: url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fmy-cursor.cur);
border-image-source: url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fmedia%2Fdiamonds.png);
src: url('/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Ffantastic-font.woff');
offset-path: url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Furl_function%23path);
mask-image: url("/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fmasks.svg%23mask1");
/* 代替付きのプロパティ */
cursor: url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fpointer.cur), pointer;
/* 関連する一括指定プロパティ */
background: url('/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fstar.gif') bottom right repeat-x blue;
border-image: url("/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fmedia%2Fdiamonds.png") 30 fill / 30px / 30px space;
/* 他の CSS 関数の引数として */
background-image: cross-fade(20% url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Ffirst.png), url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fsecond.png));
mask-image: image(url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fmask.png), skyblue, linear-gradient(black, transparent));
/* 一括指定ではない複数の値の一部として */
content: url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fstar.svg) url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fstar.svg) url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fstar.svg) url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fstar.svg) url(/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fstar.svg);
/* アットルール */
@document url("/api/flow.js?q=https%3A%2F%2Fwww.example.com%2F") { /* … */ }
@import url("/api/flow.js?q=https%3A%2F%2Fwww.example.com%2Fstyle.css");
@namespace url(/api/flow.js?q=http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml);
値
<string>-
URL を指定する文字列。これは、相対アドレス、絶対アドレス、またはポインター、あるいは含まれるウェブリソースへのデータ URL です。また、ハッシュ URL を使用して、SVG シェイプまたは SVG フィルターの ID を参照することもできます。
引用符は一般的にオプションです。URL に括弧、ホワイトスペース、引用符が含まれている場合（これらの文字がエスケープされている場合を除く）、またはアドレスに 0x7e 以上の制御文字が含まれている場合は、引用符が必要です。通常の文字列構文の規則が適用されます。二重引用符は二重引用符内で使用することはできず、単一引用符はエスケープされていない限り単一引用符内で使用することはできません。
<url-modifier>-
将来的には、
url()関数で修飾子、識別子、または関数記法を指定して、URL 文字列の意味を変更できるようになるかもしれません。これはサポートされておらず、仕様書でも完全に定義されていません。
形式文法
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
例
background プロパティで使用される URL
body {
background: url("/api/flow.js?q=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fleopard.jpg")
#0000dd no-repeat fixed;
}
リストの先頭記号として使用される画像を読み込む URL
ul {
list-style: outside
url("/api/flow.js?q=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Ffirefox-logo.svg");
}
content プロパティの使用
HTML
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS
li::after {
content: " - "
url("/api/flow.js?q=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fstar-white_16x16.png");
}
結果
データ URL の使用
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 は以下のどちらかでなければなりません。
- SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。
- SVG がページ内にある場合は、フィルターの ID。
.blur {
filter: url("/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Fmy-file.svg%23svg-blur"); /* フィルターとして使用する SVG ファイルの URL */
}
.inline-blur {
filter: url("/api/flow.js?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FCSS%2FReference%2FValues%2Furl_function%23svg-blur"); /* HTML ページに埋め込まれた SVG の ID */
}
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # urls |