From c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 22:08:32 +0900 Subject: CSS 画像の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/16 時点の英語版に同期 --- files/ja/web/css/url()/index.md | 235 ++++++++++++++++++---------------------- files/ja/web/css/url()/star.gif | Bin 0 -> 396 bytes 2 files changed, 106 insertions(+), 129 deletions(-) create mode 100644 files/ja/web/css/url()/star.gif (limited to 'files/ja/web/css/url()') diff --git a/files/ja/web/css/url()/index.md b/files/ja/web/css/url()/index.md index b0bbf37393..7bf8df75de 100644 --- a/files/ja/web/css/url()/index.md +++ b/files/ja/web/css/url()/index.md @@ -3,33 +3,32 @@ title: url() slug: Web/CSS/url() tags: - CSS - - CSS Function - - Function + - CSS 関数 + - 関数 - Layout - Reference - - Web + - ウェブ - url() browser-compat: css.types.url translation_of: Web/CSS/url() --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

+> **Note:** {{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 の `` データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 `url()` は真に `` のみを記述します。 -

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

-
- -
/* 単純な使い方 */
+```css
+/* 単純な使い方 */
 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");
+background-image: url("star.gif");
 list-style-image: url('../images/bullet.jpg');
 content: url("pdficon.jpg");
 cursor: url(mycursor.cur);
@@ -42,173 +41,151 @@ 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;
+background: url('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);
+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('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('filter')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, {{cssxref('offset-path')}}, +[@font-face](/ja/docs/Web/CSS/@font-face) ブロック内での [src](/ja/docs/Web/CSS/@font-face/src), [@counter-style/symbol](/ja/docs/Web/CSS/@counter-style/symbols) の値として使用することができます。 + +## Syntax + +### Values + +- `` -

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

+ - : URL まだは SVG 図形の ID を指定することができる文字列です。 -

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 値として使用することができます。

+ - \ -

構文

+ - : 含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。 -

値

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

URL を引用符なしで書く場合は、 URL に含まれる括弧、ホワイトスペース文字、単一引用符 (')、二重引用符 (") の前にバックスラッシュを (\) を使用してください。

-
-
パス
-
SVG 図形の ID への参照 -- circle, ellipse, line, path, polygon, polyline, rect -- パスとして図形の形状を使用します。
-
-
-
<url-modifier> {{Experimental_Inline}}
-
将来的に url() 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。
-
+ - パス + - : [SVG 図形](/ja/docs/Web/SVG/Tutorial/Basic_Shapes)の ID への参照 -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` -- パスとして図形の形状を使用します。 -

形式文法

+- `` {{Experimental_Inline}} + - : 将来的に `url()` 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法の指定に対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。 -
url( <string> <url-modifier>* )
+## 形式文法 + +```css +url( * ) +```

例

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

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

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

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

content プロパティの使用

-

HTML

+#### HTML -
<ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</ul>
+```html +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+``` -

CSS

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

結果

+#### Result -

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

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

data-uri の使用

-
-

HTML

+#### HTML -
<div class="background"></div>
+```html +
+``` -

CSS

+#### CSS - +} +``` -
.background {
+```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("Using_a_data-uri", "100%", 50)}}

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

フィルターでの使用

-

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

+URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。 -
    -
  1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。
    2. -
  2. SVG がページ内にある場合は、フィルターの ID。
    3. -
+1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。 +2. SVG がページ内にある場合は、フィルターの ID。 -
.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')}}初回定義
- -

ブラウザーの互換性

- -
{{Compat}}
- -

関連情報

+ .blur { +   filter: url(my-file.svg#svg-blur); /* フィルターとして使用する SVG ファイルの URL */ + } -
    -
  • {{cssxref("<gradient>")}}
    • -
  • {{cssxref("element()")}}
    • -
  • {{cssxref("image()")}}
    • -
  • {{cssxref("image-set()")}}
    • -
  • {{cssxref("cross-fade()")}}
    • -
+ .inline-blur { + filter: url(#svg-blur); /* HTML ページに埋め込まれた SVG の ID */ + } + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("<gradient>")}} +- {{cssxref("element()")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/url()/star.gif b/files/ja/web/css/url()/star.gif new file mode 100644 index 0000000000..09dff1d9c0 Binary files /dev/null and b/files/ja/web/css/url()/star.gif differ -- cgit v1.2.3-54-g00ecf