aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-08-10 23:10:53 +0900
committerGitHub <noreply@github.com>2021-08-10 23:10:53 +0900
commit9448fc720b6902ad6c3300b068e275e0e22043eb (patch)
treec42a0d88677b1b6908ebdbe35d37e26152b06d22
parentd70512add85ac75252555597a123d9cc41c09a6e (diff)
downloadtranslated-content-9448fc720b6902ad6c3300b068e275e0e22043eb.tar.gz
translated-content-9448fc720b6902ad6c3300b068e275e0e22043eb.tar.bz2
translated-content-9448fc720b6902ad6c3300b068e275e0e22043eb.zip
conflicting/Web/CSS/url() を Web/CSS/url() と統合 (#1860)
* conflicting/Web/CSS/url() を削除 - conflicting 版は古い仕様に基づいているため。 * Web/CSS/url() を更新 - conflicting 版の内容を一部使用し、最新版の英語版に同期
-rw-r--r--files/ja/_redirects.txt6
-rw-r--r--files/ja/_wikihistory.json10
-rw-r--r--files/ja/conflicting/web/css/url()/index.html97
-rw-r--r--files/ja/web/css/url()/index.html179
4 files changed, 111 insertions, 181 deletions
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 70f371161a..c96690a77a 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -586,7 +586,7 @@
/ja/docs/CSS/transition-property /ja/docs/Web/CSS/transition-property
/ja/docs/CSS/transition-timing-function /ja/docs/Web/CSS/transition-timing-function
/ja/docs/CSS/unicode-bidi /ja/docs/Web/CSS/unicode-bidi
-/ja/docs/CSS/uri /ja/docs/conflicting/Web/CSS/url()
+/ja/docs/CSS/uri /ja/docs/Web/CSS/url()
/ja/docs/CSS/used_value /ja/docs/Web/CSS/used_value
/ja/docs/CSS/user-ident /ja/docs/Web/CSS/custom-ident
/ja/docs/CSS/vertical-align /ja/docs/Web/CSS/vertical-align
@@ -3924,8 +3924,8 @@
/ja/docs/Web/CSS/transform-function/translateX /ja/docs/orphaned/Web/CSS/transform-function/translateX
/ja/docs/Web/CSS/transform-function/translateY /ja/docs/Web/CSS/transform-function/translateY()
/ja/docs/Web/CSS/transform-function/translateZ /ja/docs/Web/CSS/transform-function/translateZ()
-/ja/docs/Web/CSS/uri /ja/docs/conflicting/Web/CSS/url()
-/ja/docs/Web/CSS/url /ja/docs/conflicting/Web/CSS/url()
+/ja/docs/Web/CSS/uri /ja/docs/Web/CSS/url()
+/ja/docs/Web/CSS/url /ja/docs/Web/CSS/url()
/ja/docs/Web/CSS/user-ident /ja/docs/Web/CSS/custom-ident
/ja/docs/Web/CSS/var /ja/docs/Web/CSS/var()
/ja/docs/Web/CSS/visible /ja/docs/Web/CSS/visibility
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index e8c5d6df6d..f8ed432800 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -48493,16 +48493,6 @@
"Marsf"
]
},
- "conflicting/Web/CSS/url()": {
- "modified": "2020-10-15T21:22:36.291Z",
- "contributors": [
- "mfuji09",
- "SphinxKnight",
- "fscholz",
- "ethertank",
- "sosleepy"
- ]
- },
"conflicting/Web/CSS_eb0c7d23f84df658710ebb6b4bdec8ea": {
"modified": "2019-03-23T23:44:01.923Z",
"contributors": [
diff --git a/files/ja/conflicting/web/css/url()/index.html b/files/ja/conflicting/web/css/url()/index.html
deleted file mode 100644
index 827acec945..0000000000
--- a/files/ja/conflicting/web/css/url()/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: <url>
-slug: conflicting/Web/CSS/url()
-tags:
- - CSS
- - CSS データ型
- - Reference
- - URI
- - URL
- - urn
- - レイアウト
-translation_of: Web/CSS/url()
-translation_of_original: Web/CSS/url
-original_slug: Web/CSS/url
----
-<div>{{CssRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>&lt;url&gt;</code></strong> <a href="/en-US/docs/Web/CSS/CSS_Types">データ型</a>は、画像やフォントなどのリソースへのポインターを記述します。 URL は {{Cssxref("background-image")}}, {{Cssxref("cursor")}}, {{cssxref("list-style")}} のような様々な CSS のプロパティで使用することができます。</p>
-
-<div class="note">
-<p><strong>URI か URL か?</strong> {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの<em>場所</em>を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。</p>
-
-<p>CSS Level 1 では、 <code>url()</code> 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 <code>url()</code> の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは <code>url()</code> を CSS の <code>&lt;uri&gt;</code> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 <code>url()</code> は真に <code>&lt;url&gt;</code> のみを記述します。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p><code>&lt;url&gt;</code> データ型は <code id="The_url()_functional_notation">url()</code> 関数表記を使用して指定します。引用符なしでも、単一引用符または二重引用符で囲んでも書くことができます。相対 URL も使用することができ、そのスタイルシートの URL からの相対になります (ウェブページの URL ではありません)。</p>
-
-<pre class="syntaxbox">&lt;a_css_property&gt;: url("http://mysite.example.com/mycursor.png")
-&lt;a_css_property&gt;: url('http://mysite.example.com/mycursor.png')
-&lt;a_css_property&gt;: url(http://mysite.example.com/mycursor.png)
-</pre>
-
-<div class="note">
-<p><strong>メモ:</strong> Firefox 15以降、 0x7e より大きな制御文字は、引用符で囲まない URL では許可されなくなりました。詳細は {{Bug(752230)}} をご覧ください。</p>
-</div>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<pre class="brush: css">.topbanner {
- background: url("topbanner.png") #00D no-repeat fixed;
-}
-</pre>
-
-<pre class="brush: css">ul {
- list-style: square url(http://www.example.com/redball.png);
-}
-</pre>
-
-<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', '&lt;url&gt;')}}</td>
- <td>{{Spec2('CSS4 Values')}}</td>
- <td> </td>
- </tr>
- <tr>
- <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
- <td>{{Spec2('CSS3 Values')}}</td>
- <td>CSS Level 2 (Revision 1) から重要な変更なし</td>
- </tr>
- <tr>
- <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
- <td>{{Spec2('CSS2.1')}}</td>
- <td>CSS Level 1 から重要な変更なし</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</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("&lt;gradient&gt;")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li>{{cssxref("_image","image()")}}</li>
- <li>{{cssxref("image-set","image-set()")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
-</ul>
diff --git a/files/ja/web/css/url()/index.html b/files/ja/web/css/url()/index.html
index 0f5c82632d..b0bbf37393 100644
--- a/files/ja/web/css/url()/index.html
+++ b/files/ja/web/css/url()/index.html
@@ -3,19 +3,26 @@ title: url()
slug: Web/CSS/url()
tags:
- CSS
- - CSS 関数
+ - CSS Function
+ - Function
- Layout
- Reference
- Web
- url()
- - レイアウト
+browser-compat: css.types.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 &lt;url&gt; データ型の値になります。</span></p>
-<pre class="brush: css no-line-numbers notranslate">/* 単純な使い方 */
+<div class="notecard note">
+<p><strong>URI か URL か?</strong> {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの<em>場所</em>を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。</p>
+
+<p>CSS Level 1 では、 <code>url()</code> 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 <code>url()</code> の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは <code>url()</code> を CSS の <code>&lt;uri&gt;</code> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 <code>url()</code> は真に <code>&lt;url&gt;</code> のみを記述します。</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* 単純な使い方 */
url(https://example.com/images/myImg.jpg);
url(data:image/png;base64,iRxVB0…);
url(myFont.woff);
@@ -55,41 +62,54 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
<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>&lt;url&gt;</code> のみを記述するようになりました。</p>
+<h2 id="Syntax">構文</h2>
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<h3 id="Values" name="Values">値</h3>
+<h3 id="Values">値</h3>
<dl>
- <dt><code>&lt;string&gt;</code></dt>
- <dd>
- <dl>
- <dt>&lt;url&gt;</dt>
- <dd>含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。 URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。
- <pre class="syntaxbox notranslate">&lt;css_property&gt;: url("https://example.com/image.png")
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>
+ <dl>
+ <dt>&lt;url&gt;</dt>
+ <dd>含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。 URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。
+ <pre class="syntaxbox notranslate">&lt;css_property&gt;: url("https://example.com/image.png")
&lt;css_property&gt;: url('https://example.com/image.png')
&lt;css_property&gt;: 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;">&lt;url-modifier&gt;</code> {{Experimental_Inline}}</dt>
- <dd>将来的に <code>url()</code> 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。</dd>
+
+ <p>URL を引用符なしで書く場合は、 URL に含まれる括弧、ホワイトスペース文字、単一引用符 (<code>'</code>)、二重引用符 (<code>"</code>) の前にバックスラッシュを (<code>\</code>) を使用してください。</p>
+ </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>&lt;url-modifier&gt;</code> {{Experimental_Inline}}</dt>
+ <dd>将来的に <code>url()</code> 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。</dd>
</dl>
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+<h3 id="Formal_syntax">形式文法</h3>
-<pre class="syntaxbox notranslate">url( <a href="/ja/docs/Web/CSS/string">&lt;string&gt;</a> &lt;url-modifier&gt;* )</pre>
+<pre class="brush: css">url( <a href="/ja/docs/Web/CSS/string">&lt;string&gt;</a> &lt;url-modifier&gt;* )</pre>
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
-<h3 id="content_property" name="content_property">content プロパティ</h3>
+<h3 id="A_url_used_in_the_background_property">background プロパティで使用される URL</h3>
+
+<pre>.topbanner {
+ background: url("topbanner.png") #00D no-repeat fixed;
+}
+</pre>
+
+<h3 id="A_url_loading_an_image_as_a_list_bullet">リストの先頭記号として使用される画像を読み込む URL</h3>
+
+<pre>ul {
+ list-style: square url(http://www.example.com/redball.png);
+}</pre>
+
+<h3 id="Usage_in_the_content_property">content プロパティの使用</h3>
<h4 id="HTML">HTML</h4>
-<pre class="brush: html notranslate">&lt;ul&gt;
+<pre class="brush: html">&lt;ul&gt;
&lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;Item 2&lt;/li&gt;
&lt;li&gt;Item 3&lt;/li&gt;
@@ -97,81 +117,98 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
<h4 id="CSS">CSS</h4>
-<pre class="brush: css highlight[2] notranslate">li::after {
+<pre class="brush: css highlight[2]">li::after {
content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
}</pre>
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="Result">結果</h4>
-<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p>
+<p>{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}}</p>
-<h3 id="data-uri">data-uri</h3>
+<h3 id="Using_a_data-uri">data-uri の使用</h3>
<div id="color-value">
<h4 id="HTML_2">HTML</h4>
-<pre class="brush: html notranslate">&lt;div class="background"&gt;&lt;/div&gt;</pre>
+<pre class="brush: html">&lt;div class="background"&gt;&lt;/div&gt;</pre>
<h4 id="CSS_2">CSS</h4>
<div class="hidden">
-<pre class="brush: css notranslate">.background {
+<pre class="brush: css">.background {
height: 100vh;
}</pre>
</div>
-<pre class="brush: css highlight[6] notranslate">.background {
+<pre class="brush: css highlight[6]">.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>
+<p>{{EmbedLiveSample("Using_a_data-uri", "100%", 50)}}</p>
+
+<h3 id="Usage_in_filters">フィルターでの使用</h3>
+
+<p>URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。</p>
+
+<ol>
+ <li>SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。</li>
+ <li>SVG がページ内にある場合は、フィルターの ID。</li>
+</ol>
+
+<pre>.blur {
+  filter: url(my-file.svg#svg-blur); /* the URL of an SVG file used as a filter */
+}
+
+.inline-blur {
+ filter: url(#svg-blur); /* the ID of an SVG that is embedded in the HTML page */
+}</pre>
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+<h2 id="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>
+ <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>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-<div>{{Compat("css.types.url")}}</div>
+<div>{{Compat}}</div>
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
<ul>
- <li>{{cssxref("&lt;gradient&gt;")}}</li>
- <li>{{cssxref("element()")}}</li>
- <li>{{cssxref("_image","image()")}}</li>
- <li>{{cssxref("image-set","image-set()")}}</li>
- <li>{{cssxref("cross-fade")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image()")}}</li>
+ <li>{{cssxref("image-set()")}}</li>
+ <li>{{cssxref("cross-fade()")}}</li>
</ul>