From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/url()/index.html | 179 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 files/ja/web/css/url()/index.html (limited to 'files/ja/web/css/url()/index.html') diff --git a/files/ja/web/css/url()/index.html b/files/ja/web/css/url()/index.html new file mode 100644 index 0000000000..31168a5324 --- /dev/null +++ b/files/ja/web/css/url()/index.html @@ -0,0 +1,179 @@ +--- +title: url() +slug: Web/CSS/url() +tags: + - CSS + - CSS 関数 + - Layout + - Reference + - Web + - url() + - レイアウト +translation_of: Web/CSS/url() +--- +
{{CSSRef}}
+ +

url() は CSS 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです url() 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。 url() 関数表記は the <url> データ型の値になります。

+ +
/* 単純な使い方 */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* 関連するプロパティ */
+background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* 代替付きのプロパティ */
+cursor: url(pointer.cur), pointer;
+
+/* 関連する一括指定プロパティ */
+background: url('https://mdn.mozillademos.org/files/16761/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(rgba(0, 0, 0, 1.0), transparent);
+
+/* 一括指定ではない複数の値の一部として */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* @-規則 */
+@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+
+ +

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

+ +

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

+ +

CSS 第1水準では、 url() 関数表記は真に URL のみが記述されていました。 CSS 第2水準では、 url() の定義は任意の URI に広げられ、 URN を含むようになりました。 CSS Values and Units 第3水準では再び狭められ、 url() は真に <url> のみを記述するようになりました。

+ +

構文

+ +

値

+ +
+
<string>
+
+
+
<url>
+
含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。 URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。 + 
<css_property>: url("https://example.com/image.png")
+<css_property>: url('https://example.com/image.png')
+<css_property>: url(https://example.com/image.png)
+
+
パス
+
SVG 図形の ID への参照 -- circle, ellipse, line, path, polygon, polyline, rect -- パスとして図形の形状を使用します。
+
+
+
<url-modifier> {{Experimental_Inline}}
+
将来的に url() 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。
+
+ +

形式文法

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

例

+ +

content プロパティ

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+ +

CSS

+ +
li::after {
+  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+}
+ +

結果

+ +

{{EmbedLiveSample("content_property", "100%", 50)}}

+ +

data-uri

+ +
+

HTML

+ +
<div class="background"></div>
+ +

CSS

+ + + +
.background {
+  background: yellow;
+  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");
+}
+
+ +

{{EmbedLiveSample("data-uri", "100%", 50)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#urls', 'url()')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#urls', 'url()')}}{{Spec2('CSS3 Values')}}CSS 第2水準 (第1稿) から重要な変更なし
{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}{{Spec2('CSS2.1')}}CSS 第1水準から重要な変更なし
{{SpecName('CSS1', '#url', 'url()')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.types.url")}}
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf