diff options
Diffstat (limited to 'files/ja/web/css/url()/index.html')
| -rw-r--r-- | files/ja/web/css/url()/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
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() +--- +<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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<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> |