1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
title: url()
slug: Web/CSS/url()
tags:
- CSS
- CSS 関数
- Layout
- Reference
- Web
- url()
- レイアウト
translation_of: Web/CSS/url()
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><code><strong>url()</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです <code><strong>url()</strong></code> 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。 url() 関数表記は the <url> データ型の値になります。</span></p>
<pre class="brush: css no-line-numbers notranslate">/* 単純な使い方 */
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);
</pre>
<p>相対 URL が使用された場合は、 (ウェブページの URL からではなく) スタイルシートの URL からの相対となります。</p>
<p class="task-list-item"><code><strong>url()</strong></code> 関数は {{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')}}, <a href="/ja/docs/Web/CSS/@font-face">@font-face</a> ブロック内での <a href="/ja/docs/Web/CSS/@font-face/src">src</a>, <a href="/ja/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a> 値として使用することができます。</p>
<p>CSS 第1水準では、 <code>url()</code> 関数表記は真に URL のみが記述されていました。 CSS 第2水準では、 <code>url()</code> の定義は任意の URI に広げられ、 URN を含むようになりました。 CSS Values and Units 第3水準では再び狭められ、 <code>url()</code> は真に <code><url></code> のみを記述するようになりました。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code><string></code></dt>
<dd>
<dl>
<dt><url></dt>
<dd>含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。 URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。
<pre class="syntaxbox notranslate"><css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)</pre>
</dd>
<dt>パス</dt>
<dd><a href="/ja/docs/Web/SVG/Tutorial/Basic_Shapes">SVG 図形</a>の ID への参照 -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, <code>rect</code> -- パスとして図形の形状を使用します。</dd>
</dl>
</dd>
<dt><code style="white-space: nowrap;"><url-modifier></code> {{Experimental_Inline}}</dt>
<dd>将来的に <code>url()</code> 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
<pre class="syntaxbox notranslate">url( <a href="/ja/docs/Web/CSS/string"><string></a> <url-modifier>* )</pre>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="content_property" name="content_property">content プロパティ</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css highlight[2] notranslate">li::after {
content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
}</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p>
<h3 id="data-uri">data-uri</h3>
<div id="color-value">
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><div class="background"></div></pre>
<h4 id="CSS_2">CSS</h4>
<div class="hidden">
<pre class="brush: css notranslate">.background {
height: 100vh;
}</pre>
</div>
<pre class="brush: css highlight[6] notranslate">.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");
}</pre>
</div>
<p>{{EmbedLiveSample("data-uri", "100%", 50)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Values', '#urls', 'url()')}}</td>
<td>{{Spec2('CSS4 Values')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Values', '#urls', 'url()')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>CSS 第2水準 (第1稿) から重要な変更なし</td>
</tr>
<tr>
<td>{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>CSS 第1水準から重要な変更なし</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#url', 'url()')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>{{Compat("css.types.url")}}</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{cssxref("<gradient>")}}</li>
<li>{{cssxref("element()")}}</li>
<li>{{cssxref("_image","image()")}}</li>
<li>{{cssxref("image-set","image-set()")}}</li>
<li>{{cssxref("cross-fade")}}</li>
</ul>
|
