From 9448fc720b6902ad6c3300b068e275e0e22043eb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 10 Aug 2021 23:10:53 +0900 Subject: conflicting/Web/CSS/url() を Web/CSS/url() と統合 (#1860) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * conflicting/Web/CSS/url() を削除 - conflicting 版は古い仕様に基づいているため。 * Web/CSS/url() を更新 - conflicting 版の内容を一部使用し、最新版の英語版に同期 --- files/ja/web/css/url()/index.html | 179 +++++++++++++++++++++++--------------- 1 file changed, 108 insertions(+), 71 deletions(-) (limited to 'files/ja/web') 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() ---
{{CSSRef}}

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

-
/* 単純な使い方 */
+

+
URI か URL か？ {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの場所を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。

+
+
CSS Level 1 では、 url() 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 url() の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは url() を CSS の <uri> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 url() は真に <url> のみを記述します。

+

+
+
/* 単純な使い方 */
 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);
 
 
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")
+	
<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 を引用符なしで書く場合は、 URL に含まれる括弧、ホワイトスペース文字、単一引用符 (')、二重引用符 (") の前にバックスラッシュを (\) を使用してください。

+		

+		
パス

+		
SVG 図形の ID への参照 -- circle, ellipse, line, path, polygon, polyline, rect -- パスとして図形の形状を使用します。

+	

+	

+	
<url-modifier> {{Experimental_Inline}}

+	
将来的に url() 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。

 

 
-
形式文法

+
形式文法

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

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

 
-
例

+
例

 
-
content プロパティ

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

+
+
.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+

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

+
+
ul {
+  list-style: square url(http://www.example.com/redball.png);
+}

+
+
content プロパティの使用

 
 
HTML

 
-
<ul>
+
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
@@ -97,81 +117,98 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
 
 
CSS

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

 
-
結果

+
結果

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

+
{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}}

 
-
data-uri

+
data-uri の使用

 
 

 
HTML

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

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

 
 
CSS

 
 
 
-
.background {
+
.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)}}

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

+
+
フィルターでの使用

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

+
+
    
+	
  1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。
    2. 
+	
  2. SVG がページ内にある場合は、フィルターの ID。
    3. 
+

+
+
.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 */
+}

 
-
仕様書

+
仕様書

 
 
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
+	
+		
+			
+			
+			
+		
+	
+	
+		
+			
+			
+			
+		
+		
+			
+			
+			
+		
+		
+			
+			
+			
+		
+		
+			
+			
+			
+		
+	
仕様書状態備考
{{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')}}初回定義
仕様書状態備考
{{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")}}

+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
    
- 
  • {{cssxref("<gradient>")}}
    • 
- 
  • {{cssxref("element()")}}
    • 
- 
  • {{cssxref("_image","image()")}}
    • 
- 
  • {{cssxref("image-set","image-set()")}}
    • 
- 
  • {{cssxref("cross-fade")}}
    • 
+	
  • {{cssxref("<gradient>")}}
    • 
+	
  • {{cssxref("element()")}}
    • 
+	
  • {{cssxref("image()")}}
    • 
+	
  • {{cssxref("image-set()")}}
    • 
+	
  • {{cssxref("cross-fade()")}}
    • 
 

-- 
cgit v1.2.3-54-g00ecf