diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-17 22:08:32 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-25 23:29:36 +0900 |
| commit | c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba (patch) | |
| tree | 301a73d7a3bc02f72ea0ed0ff7dd2ea54c9b4135 /files/ja/web | |
| parent | 7e6441ff570f21d62937045a7366effe282323da (diff) | |
| download | translated-content-c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba.tar.gz translated-content-c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba.tar.bz2 translated-content-c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba.zip | |
CSS 画像の文書を更新
- 2021/10/16 時点の英語版に同期
Diffstat (limited to 'files/ja/web')
/br.png?h=dependabot/github_actions/actions/cache-2.1.7&id=c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba){kind=link}
/tr.png?h=dependabot/github_actions/actions/cache-2.1.7&id=c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba){kind=link}
/star.gif?h=dependabot/github_actions/actions/cache-2.1.7&id=c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba){kind=link}
22 files changed, 1068 insertions, 1121 deletions
diff --git a/files/ja/web/css/cross-fade()/br.png b/files/ja/web/css/cross-fade()/br.png Binary files differnew file mode 100644 index 0000000000..99477b2318 --- /dev/null +++ b/files/ja/web/css/cross-fade()/br.png diff --git a/files/ja/web/css/cross-fade()/index.md b/files/ja/web/css/cross-fade()/index.md index 5cf8359073..86e21e9c97 100644 --- a/files/ja/web/css/cross-fade()/index.md +++ b/files/ja/web/css/cross-fade()/index.md @@ -3,149 +3,144 @@ title: cross-fade() slug: Web/CSS/cross-fade() tags: - CSS - - CSS Function - - CSS-4 Images - - Experimental - - Function + - CSS 関数 + - CSS-4 画像 + - 実験的 + - 関数 - Reference - - Web + - ウェブ +browser-compat: css.types.image.cross-fade translation_of: Web/CSS/cross-fade() --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><span class="seoSummary">CSS の <strong><code>cross-fade()</code></strong> 関数は、2枚以上の画像を所定の透過度で合成するために使用することができます。</span>これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。</p> +**`cross-fade()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、2 枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><strong>重要</strong>: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。</p> +**重要**: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。 -<h3 id="Specification_syntax" name="Specification_syntax">仕様書上の構文</h3> +## 仕様書上の構文 -<p><code>cross-fade()</code> 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、 “%” 記号を含め、 0% から 100% までの間である必要があります。</p> +`cross-fade()` 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、`'%'` 記号を含め、 0% から 100% までの間である必要があります。 -<p>この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。</p> +この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。 -<h4 id="Cross-fade_percentages" name="Cross-fade_percentages">cross-fade のパーセント値</h4> +#### cross-fade のパーセント値 -<p>Think of the percentage as an opacity value for each image. This means a value of 0% means the image is fully transparent while a value of 100% makes the image fully opaque.</p> +子のパーセント値は、それぞれの画像の混合率の値と考えてください。つまり、0% の値は画像が完全に透明であり、100% の値は完全に不透明になります。 -<pre class="brush: css notranslate">cross-fade( url(white.png) 0%, url(black.png) 100%); /* fully black */ -cross-fade( url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */ -cross-fade( url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */ -<span class="hljs-tag"><span class="hljs-value">cross-fade( url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */ -cross-fade( url(white.png) 100%, url(black.png) 0%); /* fully white */ -cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */</span></span></pre> +```css +cross-fade( url(white.png) 0%, url(black.png) 100%); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png) 75%); /* 黒 25%、白 75% */ +cross-fade( url(white.png) 50%, url(black.png) 50%); /* 黒 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png) 25%); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png) 0%); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ +``` -<p>If any percentages are omitted, all the specified percentages are summed together and subtracted from <code>100%</code>. If the result is greater than 0%, the result is then divided equally between all images with omitted percentages.</p> +パーセント値が省略された場合は、指定されたすべてのパーセント値が合計され、`100%` から減算されます。その結果が `0%` より大きい場合は、パーセント値が省略されているすべての画像で均等に分割されます。 -<p>In the simplest case, two images are faded between each other. To do that, only one of the images needs to have a percentage, the other one will be faded accordingly. For example, a value of 0% defined for the first image yields only the second image, while 100% yields only the first. A 25% value renders the first image at 25% and the second at 75%. The 75% value is the inverse, showing the first image at 75% and the second at 25%.</p> +最も単純なケースは、2 つの画像を互いにフェードアウトさせる場合です。そのためには、パーセント値を設定する必要があるのは片方の画像だけで、もう片方の画像はそれに応じてフェードされます。例えば、1 枚目の画像に 0% の値を設定すると 2 枚目の画像のみが表示され、100% の値を設定すると 1 枚目の画像のみが表示されます。25% の値を設定すると、1 枚目の画像は 25%、2 枚目の画像は 75% で表示されます。75% の場合はその逆で、1 枚目が 75%、2 枚目が 25% になります。 -<p>The above could also have been written as:</p> +以下のように書くこともできます。 -<pre class="brush: css notranslate">cross-fade( url(white.png) 0%, url(black.png)); /* fully black */ -cross-fade( url(white.png) 25%, url(black.png)); /* 25% white, 75% black */ -cross-fade( url(white.png), url(black.png)); /* 50% white, 50% black */ -cross-fade( url(white.png) 75%, url(black.png)); /* 75% white, 25% black */ -cross-fade( url(white.png) 100%, url(black.png)); /* fully white */ -cross-fade( url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */</pre> +```css +cross-fade( url(white.png) 0%, url(black.png)); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png)); /* 黒 25%、白 75% */ +cross-fade( url(white.png), url(black.png)); /* 白 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png)); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png)); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ +``` -<p>If no percentages are declared, both the images will be 50% opaque, with a cross-fade rendering as an even merge of both images. The 50%/50% example seen above did not need to have the percentages listed, as when a percentage value is omitted, the included percentages are added together and subtracted from 100%. The result, if greater than 0, is then divided equally between all images with omitted percentages.</p> +パーセント値が宣言されていない場合は、両方の画像が 50% の混合率となり、cross-fade では両方の画像が均等に合成されたように描画されます。上述の 50%/50% の例では、パーセント値を記載する必要はありませんでした。パーセント値が省略された場合、含まれるパーセント値が合計され、100% から差し引かれます。その結果、0 より大きい場合は、パーセント値が省略されたすべての画像で均等に分割されます。 -<p>In the last example, the sum of both percentages is not 100%, and therefore both images include their respective opacities.</p> +最後の例では、両方のパーセント値の合計が 100% ではないため、両方の画像にそれぞれの混合率が含まれています。 -<p>If no percentages are declared and three images are included, each image will be 33.33% opaque. The two following are lines (almost) identical:</p> +パーセント値が宣言されておらず、3 つの画像が含まれている場合、それぞれの画像は 33.33% の混合率になります。以下の 2 つは (ほぼ) 同じ線です。 -<pre class="brush: css notranslate">cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */ -cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);</pre> +```css +cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* 3 つとも 33.3333% の混合率となる */ +cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); +``` -<h3 id="Older_implemented_syntax">Older, implemented syntax</h3> +### 古い、実装されている構文 -<pre class="syntaxbox notranslate">cross-fade( <image, <image>, <percentage> )</pre> +```css +cross-fade( <image>, <image>, <percentage> ) +``` -<p>The specification for the <code>cross-fade()</code> function allows for multiple images and for each image to have transparency values independent of the other values. This was not always the case. The <a href="/ja/docs/">original syntax</a>, which has been implemented in some browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%. The original syntax is supported in Safari and supported with the <code>-webkit-</code> prefix in Chrome, Opera, and other blink-based browsers.</p> +`cross-fade()` 関数の仕様では、複数の画像を指定し、それぞれの画像に他の値とは独立した透明度の値を持たせることができます。これは必ずしもそうではありませんでした。一部のブラウザーで実装されている元の構文では、2 つの画像しか使用できず、その 2 つの画像の透明度の合計がちょうど 100% になります。オリジナルの構文は Safari が対応しており、`-webkit-` の接頭辞付きのものは Chrome、Opera、その他の blink ベースのブラウザーで対応しています。 -<pre class="brush: css notranslate">cross-fade(url(white.png), url(black.png), 0%); /* fully black */ -cross-fade(url(white.png), url(black.png), 25%); /* 25% white, 75% black */ -cross-fade(url(white.png), url(black.png), 50%); /* 50% white, 50% black */ -cross-fade(url(white.png), url(black.png), 75%); /* 75% white, 25% black */ -cross-fade(url(white.png), url(black.png), 100%); /* fully white */ -</pre> +```css +cross-fade(url(white.png), url(black.png), 0%); /* 完全に黒 */ +cross-fade(url(white.png), url(black.png), 25%); /* 黒 25%、白 75% */ +cross-fade(url(white.png), url(black.png), 50%); /* 白 50%、白 50% */ +cross-fade(url(white.png), url(black.png), 75%); /* 白 75%、黒 25% */ +cross-fade(url(white.png), url(black.png), 100%); /* 完全に白 */ +``` -<p>In the implemented syntax, the two comma-separated images are declared first, followed by a comma and required percent value. Omitting the comma or percent invalidates the value. The percent is the opacity of the first declared image. The included percentage is subtracted from <span class="css">100%, with the difference being the opacity of the second image</span>.</p> +実装されている構文では、カンマで区切られた 2 つの画像を最初に宣言し、その後にカンマと必要なパーセント値を宣言します。カンマやパーセント値を省略すると、その値は無効になります。パーセント値は、最初に宣言された画像の混合率です。含まれるパーセントは 100% から差し引かれ、その差が 2 番目の画像の混合率になります。 -<p>The green/red example (with the percentages totalling 150%) and the yellow/red/blue example (with three images) from the specification syntax section, are not possible in this implementation.</p> +仕様書の構文の項にある緑/赤の例 (パーセント値の合計が 150%) と黄/赤/青の例 (3 つの画像を使用) は、この実装では不可能です。 -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> +## アクセシビリティの考慮 -<p>ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。</p> +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。 -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li> - <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> +- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Older_syntax_for_cross-fade" name="Older_syntax_for_cross-fade">cross-fade の古い構文</h3> +<h3 id="Older_syntax_for_cross-fade">cross-fade の古い構文</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="crossfade"></div></pre> +```html +<div class="crossfade"></div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; highlight[4-11] notranslate">.crossfade { +```css +.crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( - url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'), + url('br.png'), + url('tr.png'), 75%); background-image: cross-fade( - url('https://mdn.mozillademos.org/files/8543/br.png'), - url('https://mdn.mozillademos.org/files/8545/tr.png'), + url('br.png'), + url('tr.png'), 75%); -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}}</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 Images', '#cross-fade-function', 'cross-fade()')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.image.cross-fade")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("image")}}</li> - <li>{{cssxref("url")}}</li> - <li>{{cssxref("_image", "image()")}}</li> - <li>{{cssxref("image-set")}}</li> - <li>{{cssxref("element")}}</li> - <li><a href="/ja/docs/CSS/Using_CSS_gradients" title="Using gradients">CSS グラデーションの使用</a></li> - <li>グラデーション関数: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},</li> -</ul> +} +``` + +#### Result + +{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("image")}} +- {{cssxref("url()")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("element()")}} +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} diff --git a/files/ja/web/css/cross-fade()/tr.png b/files/ja/web/css/cross-fade()/tr.png Binary files differnew file mode 100644 index 0000000000..a6e0f81eaf --- /dev/null +++ b/files/ja/web/css/cross-fade()/tr.png diff --git a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md index acef249aad..267326417c 100644 --- a/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md +++ b/files/ja/web/css/css_images/implementing_image_sprites_in_css/index.md @@ -2,55 +2,57 @@ title: CSS での画像スプライトの実装 slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS tags: - - Advanced + - 上級者 - CSS - - CSS Images - - Graphics - - Guide + - CSS 画像 + - グラフィック + - ガイド - NeedsContent - - Sprites - - Web + - スプライト + - ウェブ translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS --- -<p>{{cssRef}}</p> +{{CSSRef}} -<p><strong>画像スプライト</strong>は、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1枚の画像として送信した方が、メモリや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。</p> +**画像スプライト**は、複数の画像を使用する多くのウェブアプリで使用されています。それぞれの画像を個別の画像ファイルとして含めるのではなく、1 枚の画像として送信した方が、メモリーや帯域幅の面ではるかに有利です。同じ画像ファイル内の個々の画像を区別する方法として背景の位置を使用することで、 HTTP リクエストの数を減らすことができます。 -<div class="note"> -<p><strong>注:</strong> HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。</p> -</div> +> **Note:** HTTP/2 を使用する場合は、複数の小さなリクエストを使用する方が、実際には帯域幅に負荷を掛けない可能性があります。 -<h2 id="Implementation" name="Implementation">実装</h2> +## 実装 -<p>例えば、 <code>toolbtn</code> クラスを持つすべてのアイテムに画像が与えられるとします。</p> +例えば、 `toolbtn` クラスを持つすべてのアイテムに画像が与えられたとします。 -<pre class="brush:css notranslate">.toolbtn { +```css +.toolbtn { background: url(myfile.png); display: inline-block; height: 20px; width: 20px; -}</pre> +} +``` -<p>背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の2つの値として、または {{cssxref("background-position")}} として追加できます。</p> +背景の位置は、 background の中で {{cssxref("url()")}} の後に x と y の 2 つの値として、または {{cssxref("background-position")}} として追加できます。 -<pre class="brush:css notranslate">#btn1 { +```css +#btn1 { background-position: -20px 0px; } #btn2 { background-position: -40px 0px; -}</pre> +} +``` -<p>これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には <code>toolbtn</code> クラスが割り当てられており、上記の画像ルールの影響を受けているとします)。</p> +これは ID が 'btn1' の要素を左に20ピクセル、 ID が 'btn2' の要素を左に40ピクセル移動します (これらの要素には `toolbtn` クラスが割り当てられており、上記の画像ルールの影響を受けているとします)。 -<p>同様に、ホバー状態にすることもできます。</p> +同様に、ホバー状態にすることもできます。 -<pre class="brush:css notranslate">#btn:hover { - background-position: <var><右方向へずらすピクセル数></var>px <var><下方向へずらすピクセル数></var>px; -}</pre> +```css +#btn:hover { + background-position: <右方向へずらすピクセル数>px <下方向へずらすピクセル数>px; +} +``` -<h2 id="See_also" name="See_also">関連記事</h2> +## 関連記事 -<ul> - <li><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Full working demo at CSS Tricks</a></li> -</ul> +- [Full working demo at CSS Tricks](https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/) diff --git a/files/ja/web/css/css_images/index.md b/files/ja/web/css/css_images/index.md index a55ff99d7d..1b2f8d66e4 100644 --- a/files/ja/web/css/css_images/index.md +++ b/files/ja/web/css/css_images/index.md @@ -4,103 +4,57 @@ slug: Web/CSS/CSS_Images tags: - CSS - CSS 画像 - - Reference + - ガイド - 概要 + - Reference translation_of: Web/CSS/CSS_Images --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p class="summary"><ruby><strong>CSS 画像</strong><rp> (</rp><rt>CSS Images</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("<image>")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。</p> +**CSS 画像** (CSS Images) は CSS のモジュールの一つで、どのような種類の画像が利用できるか ({{CSSxRef("<image>")}} 型、その中の URL、グラデーション、その他の種類の画像)、どのように大きさを変更するか、様々なレイアウトモデルで画像やその他の置換コンテンツが応答するかを定義します。 -<h2 id="Reference" name="Reference">リファレンス</h2> +## リファレンス -<h3 id="Properties" name="Properties">プロパティ</h3> +### プロパティ -<div class="index"> -<ul> - <li>{{CSSxRef("image-orientation")}}</li> - <li>{{CSSxRef("image-rendering")}}</li> - <li>{{CSSxRef("image-resolution")}}</li> - <li>{{CSSxRef("object-fit")}}</li> - <li>{{CSSxRef("object-position")}}</li> -</ul> -</div> +- {{CSSxRef("image-orientation")}} +- {{CSSxRef("image-rendering")}} +- {{CSSxRef("image-resolution")}} +- {{CSSxRef("object-fit")}} +- {{CSSxRef("object-position")}} -<h3 id="Functions" name="Functions">関数</h3> +### 関数 -<div class="index"> -<ul> - <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li> - <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li> - <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li> - <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li> - <li>{{CSSxRef("conic-gradient")}}</li> - <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li> - <li>{{CSSxRef("url", "url()")}}</li> - <li>{{CSSxRef("element", "element()")}}</li> - <li>{{CSSxRef("_image", "image()")}}</li> - <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li> -</ul> -</div> +- {{CSSxRef("gradient/linear-gradient()", "linear-gradient()")}} +- {{CSSxRef("gradient/radial-gradient()", "radial-gradient()")}} +- {{CSSxRef("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} +- {{CSSxRef("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}} +- {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{CSSxRef("url()", "url()")}} +- {{CSSxRef("element()", "element()")}} +- {{CSSxRef("image/image()", "image()")}} +- {{CSSxRef("cross-fade()", "cross-fade()")}} -<h3 id="Data_types" name="Data_types">データ型</h3> +### データ型 -<div class="index"> -<ul> - <li>{{CSSxRef("<gradient>")}}</li> - <li>{{CSSxRef("<image>")}}</li> -</ul> -</div> +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("<image>")}} -<h2 id="Guides" name="Guides">ガイド</h2> +## ガイド -<dl> - <dt><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></dt> - <dd>特殊な CSS 画像型である<em>グラデーション</em>と、その作り方や使い方を紹介します。</dd> - <dt><a href="/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS での画像スプライトの実装</a></dt> - <dd>単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。</dd> -</dl> +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) + - : 特殊な CSS 画像型である*グラデーション*と、その作り方や使い方を紹介します。 +- [CSS での画像スプライトの実装](/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS) + - : 単一の文書でいくつかの画像をグループ化して、ダウロードリクエストを節約し、ページのスピードを上げることができる共通のテクニックを説明します。 -<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 Images")}}</td> - <td>{{Spec2("CSS4 Images")}}</td> - <td>{{CSSxRef("image-resolution")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("_image", "image()")}} を追加</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Images")}}</td> - <td>{{Spec2("CSS3 Images")}}</td> - <td>{{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加</td> - </tr> - <tr> - <td>{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}</td> - <td>{{Spec2("Compat")}}</td> - <td><code>-webkit</code> の接頭辞が付いたグラデーション値の関数を標準化</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Values", "#urls", "<url>")}}</td> - <td>{{Spec2("CSS3 Values")}}</td> - <td> </td> - </tr> - <tr> - <td>{{Specname("CSS2.1", "syndata.html#uri", "<uri>")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS1", "#url", "<url>")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName("CSS4 Images")}} | {{Spec2("CSS4 Images")}} | {{CSSxRef("image-resolution")}}, {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}}, {{CSSxRef("image/image()", "image()")}} を追加 | +| {{SpecName("CSS3 Images")}} | {{Spec2("CSS3 Images")}} | {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}}, {{CSSxRef("object-position")}} を追加 | +| {{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}} | {{Spec2("Compat")}} | `-webkit` の接頭辞が付いたグラデーション値の関数を標準化 | +| {{SpecName("CSS3 Values", "#urls", "<url>")}} | {{Spec2("CSS3 Values")}} | | +| {{Specname("CSS2.1", "syndata.html#uri", "<uri>")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS1", "#url", "<url>")}} | {{Spec2("CSS1")}} | 初回定義 | diff --git a/files/ja/web/css/css_images/using_css_gradients/index.md b/files/ja/web/css/css_images/using_css_gradients/index.md index bb810f605e..4c784dafd7 100644 --- a/files/ja/web/css/css_images/using_css_gradients/index.md +++ b/files/ja/web/css/css_images/using_css_gradients/index.md @@ -2,233 +2,242 @@ title: CSS グラデーションの使用 slug: Web/CSS/CSS_Images/Using_CSS_gradients tags: - - Advanced + - 上級者 - CSS - - CSS Images - - Example - - Gradients - - Guide - - Web + - CSS 画像 + - 例 + - グラデーション + - ガイド + - ウェブ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong>CSS グラデーション</strong>は {{cssxref("<gradient>")}} データ型で表現され、2つ以上の色の間の連続的な変化から成る {{cssxref("<image>")}} の特殊型です。グラデーションは3種類から選択することができます。<ruby>線形<rp> (</rp><rt>linear</rt><rp>)</rp></ruby> ({{cssxref("linear-gradient")}} 関数によって生成)、<ruby>放射<rp> (</rp><rt>radial</rt><rp>)</rp></ruby> ({{cssxref("radial-gradient")}} 関数によって生成)、<ruby>扇形<rp> (</rp><rt>conic</rt><rp>)</rp></ruby> ({{cssxref("conic-gradient")}} 関数によって生成) の3種類です。 {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} の各関数によって、反復グラデーションを生成することもできます。</p> +**CSS グラデーション**は {{cssxref("<gradient>")}} データ型で表現され、2つ以上の色の間の連続的な変化から成る {{cssxref("<image>")}} の特殊型です。グラデーションは3種類から選択することができます。線形 (_linear_) ({{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数によって生成)、放射 (_radial_) ({{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数によって生成)、扇形 (_conic_) ({{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数によって生成) の3種類です。 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} の各関数によって、反復グラデーションを生成することもできます。 -<p>グラデーションは、例えば背景など、 <code><image></code> が使えるところならば、どこでも利用できます。グラデーションは動的に生成されるため、従来は同様の効果を実現するために使用されていたラスタ画像ファイルを必要としません。加えて、グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。</p> +グラデーションは、例えば背景など、`<image>` が使えるところならば、どこでも利用できます。グラデーションは動的に生成されるため、従来は同様の効果を実現するために使用されていたラスタ画像ファイルを必要としません。加えて、グラデーションはブラウザーによって生成されるため、拡大した際に見栄えがより良く、その場で大きさを変更することもできます。 -<p>最初に線形グラデーションの紹介から始め、次にすべてのグラデーション型で対応している機能を、線形グラデーションを例として紹介し、それから放射グラデーション、扇形グラデーション、反復グラデーションへと移ります。</p> +最初に線形グラデーションの紹介から始め、次にすべてのグラデーション型で対応している機能を、線形グラデーションを例として紹介し、それから放射グラデーション、扇形グラデーション、反復グラデーションへと移ります。 -<h2 id="Using_linear_gradients" name="Using_linear_gradients">線形グラデーションの使用</h2> +## 線形グラデーションの使用 -<p>線形グラデーションは、直線に沿った色の帯の変化を生成します。</p> +線形グラデーションは、直線に沿った色の帯の変化を生成します。 -<div> -<h3 id="A_basic_linear_gradient" name="A_basic_linear_gradient">基本的な線形グラデーション</h3> +<h3 id="A_basic_linear_gradient">基本的な線形グラデーション</h3> -<p>グラデーションの最も基本的な形を作成するために必要なことは、2つの色を指定することです。これらは<ruby>色経由点<rp> (</rp><rt>color stops</rt><rp>) </rp></ruby>と呼ばれています。少なくとも2つ必要ですが、必要なだけの数を設定することができます。</p> +グラデーションの最も基本的な形を作成するために必要なことは、2 つの色を指定することです。これらは色経由点 (color stops) と呼ばれています。少なくとも 2 つ必要ですが、必要なだけの数を設定することができます。 -<div class="hidden"> -<pre class="brush: html notranslate" dir="rtl"><div class="simple-linear"></div></pre> +```html hidden +<div class="simple-linear"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.simple-linear { +```css +.simple-linear { background: linear-gradient(blue, pink); -}</pre> +} +``` -<p>{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('A_basic_linear_gradient', 120, 120) }} -<div> -<h3 id="Changing_the_direction" name="Changing_the_direction">方向の変更</h3> +<h3 id="Changing_the_direction">方向の変更</h3> -<p>既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。</p> +既定では、線形グラデーションは上から下へ向けて変化します。方向を指定することで向きを変更することができます。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="horizontal-gradient"></div></pre> +```html hidden +<div class="horizontal-gradient"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.horizontal-gradient { +```css +.horizontal-gradient { background: linear-gradient(to right, blue, pink); } -</pre> +``` -<p>{{ EmbedLiveSample('Changing_the_direction', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('Changing_the_direction', 120, 120) }} -<div> -<h3 id="Diagonal_gradients" name="Diagonal_gradients">対角グラデーション</h3> +<h3 id="Diagonal_gradients">対角グラデーション</h3> -<p>グラデーションを角から角へ、対角に作成することもできます。</p> +グラデーションを角から角へ、対角に作成することもできます。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="diagonal-gradient"></div></pre> +```html hidden +<div class="diagonal-gradient"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 200px; height: 100px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.diagonal-gradient { +```css +.diagonal-gradient { background: linear-gradient(to bottom right, blue, pink); } -</pre> +``` -<p>{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }}</p> -</div> +{{ EmbedLiveSample('Diagonal_gradients', 200, 100) }} -<div> -<h3 id="Using_angles" name="Using_angles">角度の指定</h3> +<h3 id="Using_angles">角度の指定</h3> -<p>方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。</p> +方向についてもっと制御したい場合は、グラデーションに特定の角度を設定することができます。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="angled-gradient"></div></pre> +```html hidden +<div class="angled-gradient"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.angled-gradient { +```css +.angled-gradient { background: linear-gradient(70deg, blue, pink); } -</pre> +``` -<p>{{ EmbedLiveSample('Using_angles', 120, 120) }}</p> +{{ EmbedLiveSample('Using_angles', 120, 120) }} -<p>角度を指定した場合、 <code>0deg</code> は下から上への垂直グラデーションを生成し、 <code>90deg</code> は左から右への水平グラデーションを生成し、同様に、時計回りに回転します。負の数の角度を指定すると、反時計回りになります。</p> +角度を指定した場合、 `0deg` は下から上への垂直グラデーションを生成し、 `90deg` は左から右への水平グラデーションを生成し、同様に、時計回りに回転します。負の数の角度を指定すると、反時計回りになります。 -<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p> -</div> + -<h2 id="Declaring_colors_creating_effects" name="Declaring_colors_creating_effects">色の宣言と効果の生成</h2> +<h2 id="Declaring_colors_creating_effects">色の宣言と効果の生成</h2> -<p>すべての<span class="js-about-item-abstr">CSS グラデーション型は位置に依存した色の範囲です。 CSS グラデーションで生成される色は、位置によって連続的に変化し、円滑な色の遷移を生み出します。単色の帯や、二つの色の間の急な遷移を生成することもできます。以下のことはすべてのグラデーション関数に言えます。</span></p> +すべての CSS グラデーション型は位置に依存した色の範囲です。 CSS グラデーションで生成される色は、位置によって連続的に変化し、円滑な色の遷移を生み出します。単色の帯や、2 つの色の間の急な遷移を生成することもできます。以下のことはすべてのグラデーション関数に言えます。 -<div> -<h3 id="Using_more_than_two_colors" name="Using_more_than_two_colors">3つ以上の色の使用</h3> +<h3 id="Using_more_than_two_colors">3 つ以上の色の使用</h3> -<p>2つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。</p> +2 つの色に限定する必要はありません — 好きなだけ使うことができます。既定では、各色はグラデーション内で等分の幅になります。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="auto-spaced-linear-gradient"></div> -</pre> +```html hidden +<div class="auto-spaced-linear-gradient"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.auto-spaced-linear-gradient { +```css +.auto-spaced-linear-gradient { background: linear-gradient(red, yellow, blue, orange); } -</pre> +``` -<p>{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('Using_more_than_two_colors', 120, 120) }} -<div> -<h3 id="Positioning_color_stops" name="Positioning_color_stops">色経由点の配置</h3> +<h3 id="Positioning_color_stops">色経由点の配置</h3> -<p>色経由点は既定の位置から動かすこともできます。位置を細かく調整するには、それぞれの色経由点に0～2個のパーセント値、または放射・線形グラデーションの場合は絶対的な長さの値を指定することができます。一をパーセント値で指定する場合は、 <code>0%</code> が開始点を示し、 <code>100%</code> が終了点を示します。但し、実現したい効果を得るために必要であれば、この範囲外の値を使用することもできます。位置を指定しないままにした場合は、その色経由点の位置は自動的に計算され、最初の色経由点は <code>0%</code> に、最後の色経由点は <code>100%</code> になり、他の色経由点は隣の色経由点の間の中間点になります。</p> +色経由点は既定の位置から動かすこともできます。位置を細かく調整するには、それぞれの色経由点に0～2個のパーセント値、または放射・線形グラデーションの場合は絶対的な長さの値を指定することができます。一をパーセント値で指定する場合は、 `0%` が開始点を示し、 `100%` が終了点を示します。但し、実現したい効果を得るために必要であれば、この範囲外の値を使用することもできます。位置を指定しないままにした場合は、その色経由点の位置は自動的に計算され、最初の色経由点は `0%` に、最後の色経由点は `100%` になり、他の色経由点は隣の色経由点の間の中間点になります。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="multicolor-linear"></div> -</pre> +```html hidden +<div class="multicolor-linear"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.multicolor-linear { +```css +.multicolor-linear { background: linear-gradient(to left, lime 28px, red 77%, cyan); } -</pre> +``` -<p>{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }} -<div> -<h3 id="Creating_hard_lines" name="Creating_hard_lines">不連続線の生成</h3> +<h3 id="Creating_hard_lines">不連続線の生成</h3> -<p>2つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、二つの色がグラデーションの中央である <code>50%</code> の色経由点を共有しています。</p> +2 つの色の間に不連続線を生成して、グラデーションの遷移の代わりに縞模様を生成するなら、隣り合う色経由点を同じ位置に設定することができます。この例では、2 つの色がグラデーションの中心である `50%` の色経由点を共有しています。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="striped"></div> -</pre> +```html hidden +<div class="striped"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.striped { +```css +.striped { background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); -}</pre> +} +``` -<p>{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }} -<div> -<h3 id="Gradient_hints" name="Gradient_hints">グラデーションのヒント</h3> +<h3 id="Gradient_hints">グラデーションのヒント</h3> -<p>既定では、グラデーションは1つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中央点をグラデーションの特定の位置に移動することができます。この例では、変化の中央点を 50% の位置から 10% の位置へ移動します。</p> +既定では、グラデーションは 1 つの色から次の色へ均等に変化します。色ヒントを加えることで、変化値の中心点をグラデーションの特定の位置に移動することができます。この例では、変化の中心点を 50% の位置から 10% の位置へ移動します。 -<div class="hidden"> -<pre class="brush: html notranslate" dir="rtl"><div class="color-hint"></div> -<div class="simple-linear"></div></pre> +```html hidden +<div class="color-hint"></div> +<div class="simple-linear"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; float: left; margin-right: 10px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.color-hint { +```css +.color-hint { background: linear-gradient(blue, 10%, pink); } .simple-linear { background: linear-gradient(blue, pink); -}</pre> +} +``` -<p>{{ EmbedLiveSample('Gradient_hints', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('Gradient_hints', 120, 120) }} -<div> -<h3 id="Creating_color_bands_stripes" name="Creating_color_bands_stripes">色の帯と縞の生成</h3> +<h3 id="Creating_color_bands_stripes">色の帯と縞の生成</h3> -<p>グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に2つの位置を含めます。色経由点には2つの位置を設定することができ、これは、異なる位置に同じ色を持つ2つの連続した色経由点に相当します。色は、第1の色経由点で完全な彩度に達し、第2の色経由点までその彩度を維持し、隣接する色経由点の第1の位置を介して隣接する色経由点の色に遷移します。</p> +グラデーションの中に単色で遷移しない色の領域を含めるには、色経由点に 2 つの位置を含めます。色経由点には 2 つの位置を設定することができ、これは、異なる位置に同じ色を持つ 2 つの連続した色経由点に相当します。色は、第 1 の色経由点で完全な彩度に達し、第 2 の色経由点までその彩度を維持し、隣接する色経由点の第 1 の位置を介して隣接する色経由点の色に遷移します。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="multiposition-stops"></div> -<div class="multiposition-stop2"></div> -</pre> +```html hidden +<div class="multiposition-stops"></div> +<div class="multiposition-stop2"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.multiposition-stops { +```css +.multiposition-stops { background: linear-gradient(to left, lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); background: linear-gradient(to left, @@ -240,243 +249,307 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients background: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); } -</pre> +``` -<p>{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}</p> +{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }} -<p>上記の第1の例では、ライムは、暗黙の 0% の位置から 20% の位置まで進み、グラデーションの幅の次の 10% の間にライムから赤へと変化し、 30% の位置で単色の赤に到達し、グラデーションを通して 45% まで単色の赤のままであり、ここでシアンにフェードアウトし、グラデーションの 15% の間は完全にシアンになる、というようになっています。</p> +上記の第 1 の例では、ライムは、暗黙の 0% の位置から 20% の位置まで進み、グラデーションの幅の次の 10% の間にライムから赤へと変化し、 30% の位置で単色の赤に到達し、グラデーションを通して 45% まで単色の赤のままであり、ここでシアンにフェードアウトし、グラデーションの 15% の間は完全にシアンになる、というようになっています。 -<p>第2の例では、各色の2番目の色経由点は、隣接する色の第1の色経由点と同じ位置にあり、縞模様の効果を生み出しています。</p> +第 2 の例では、各色の 2 番目の色経由点は、隣接する色の第1の色経由点と同じ位置にあり、縞模様の効果を生み出しています。 -<p>いずれの例でも、グラデーションは2回書かれます。第1の例は CSS Images Level 3 の方法で、色経由点ごとに色を繰り返しており、第2の例は CSS Images Level 4 の方法で、それぞれの色経由点の宣言に色経由の長さが2つずつ含まれています。</p> -</div> +いずれの例でも、グラデーションは2回書かれます。第 1 の例は CSS Images Level 3 の方法で、色経由点ごとに色を繰り返しており、第 2 の例は CSS Images Level 4 の方法で、それぞれの色経由点の宣言に色経由の長さが 2 つずつ含まれています。 -<div> -<h3 id="Controlling_the_progression_of_a_gradient" name="Controlling_the_progression_of_a_gradient">グラデーションの進行の制御</h3> +<h3 id="Controlling_the_progression_of_a_gradient">グラデーションの進行の制御</h3> -<p>既定では、グラデーションは隣接する2つの色経由点の色の間で均等に進行し、それら2つの色経由点の間の中間点が中間の色の値となります。カラーヒントの位置を指定することで、2つの色経由点間の補間、つまり進行を制御することができます。この例では、色はグラデーションの途中でライムとシアンの間の中間点に到達しますが、 50% の割合ではなく、 20% の割合で到達しています。第2の例では、カラーヒントが作ることができる違いをハイライトするためのヒントは含まれていません。</p> +既定では、グラデーションは隣接する2つの色経由点の色の間で均等に進行し、それら2つの色経由点の間の中間点が中間の色の値となります。カラーヒントの位置を指定することで、2つの色経由点間の補間、つまり進行を制御することができます。この例では、色はグラデーションの途中でライムとシアンの間の中間点に到達しますが、50% の割合ではなく、20% の割合で到達しています。第2の例では、カラーヒントが作ることができる違いをハイライトするためのヒントは含まれていません。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="colorhint-gradient"></div> <div class="regular-progression"></div> +```html hidden +<div class="colorhint-gradient"></div> <div class="regular-progression"></div> +``` -</pre> - -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.colorhint-gradient { +```css +.colorhint-gradient { background: linear-gradient(to top, black, 20%, cyan); } .regular-progression { background: linear-gradient(to top, black, cyan); } -</pre> +``` -<p>{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }} -<h3 id="Overlaying_gradients" name="Overlaying_gradients">グラデーションの重ね合わせ</h3> +<h3 id="Overlaying_gradients">グラデーションの重ね合わせ</h3> -<p>グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。</p> +グラデーションは透明度に対応しているので、複数の背景を重ねて、かなり派手な効果を得ることができます。背景は上から下に重ねられ、最初に指定されたものが上になります。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="layered-image"></div> -</pre> +```html hidden +<div class="layered-image"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 300px; height: 150px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.layered-image { +```css +.layered-image { background: linear-gradient(to right, transparent, mistyrose), - url("https://mdn.mozillademos.org/files/15525/critters.png"); + url("critters.png"); } -</pre> +``` -<p>{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}</p> +{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }} -<h3 id="Stacked_gradients" name="Stacked_gradients">グラデーションの積み重ね</h3> +<h3 id="Stacked_gradients">グラデーションの重ね合わせ</h3> -<p>グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。</p> +グラデーションを他のグラデーションと重ねることもできます。上のグラデーションが完全に不透明でない限り、下のグラデーションは表示されます。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="stacked-linear"></div> -</pre> +```html hidden +<div class="stacked-linear"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 200px; height: 200px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.stacked-linear { +```css +.stacked-linear { background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); } -</pre> +``` -<p>{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}</p> +{{ EmbedLiveSample('Stacked_gradients', 200, 200) }} -<h2 id="Using_radial_gradients" name="Using_radial_gradients">放射グラデーションの使用</h2> +<h2 id="Using_radial_gradients">放射グラデーションの使用</h2> -<p>放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。</p> +放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。 -<h3 id="A_basic_radial_gradient" name="A_basic_radial_gradient">基本的な放射グラデーション</h3> +<h3 id="A_basic_radial_gradient">基本的な放射グラデーション</h3> -<p>線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。</p> +線形グラデーションと同様に、放射グラデーションを作成するために必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置にあり、グラデーションはボックスの縦横比に合わせて楕円形になっています。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="simple-radial"></div> -</pre> +```html hidden +<div class="simple-radial"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 240px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.simple-radial { +```css +.simple-radial { background: radial-gradient(red, blue); } -</pre> +``` -<p>{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}</p> +{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }} -<h3 id="Positioning_radial_color_stops" name="Positioning_radial_color_stops">放射色経由点の配置</h3> +<h3 id="Positioning_radial_color_stops">放射色経由点の配置</h3> -<p>ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。</p> +ここでも線形グラデーションのように、放射の各色経由点をパーセント値または絶対長で配置することができます。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> +```html hidden +<div class="radial-gradient"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.radial-gradient { +```css +.radial-gradient { background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); } -</pre> +``` -<p>{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}</p> +{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }} -<h3 id="Positioning_the_center_of_the_gradient" name="Positioning_the_center_of_the_gradient">グラデーションの中心の配置</h3> +<h3 id="Positioning_the_center_of_the_gradient">グラデーションの中心の配置</h3> -<p>グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が1つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。</p> +グラデーションの中心の位置は、キーワード、パーセント値、絶対的な長さで配置することができ、長さとパーセント値が 1 つだけの場合は繰り返して用いられ、それ以外の場合は左からの位置と上からの位置の順で用いられます。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-gradient"></div> -</pre> +```html hidden +<div class="radial-gradient"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 240px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.radial-gradient { +```css +.radial-gradient { background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); } -</pre> +``` -<p>{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}</p> +{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }} -<h3 id="Sizing_radial_gradients" name="Sizing_radial_gradients">放射グラデーションの大きさの変更</h3> +<h3 id="Sizing_radial_gradients">放射グラデーションの大きさの変更</h3> -<p>線形グラデーションとは異なり、放射グラデーションは大きさを指定することができます。指定可能な値には、 closest-corner, closest-side, farthest-corner, farthest-side があり、 farthest-corner が既定値です。</p> +線形グラデーションとは異なり、放射グラデーションは大きさを指定することができます。指定可能な値には、`closest-corner`, `closest-side`, `farthest-corner`, `farthest-side` があり、`farthest-corner` が既定値です。 -<h4 id="Example_closest-side_for_ellipses" name="Example_closest-side_for_ellipses">例: 楕円の closest-side</h4> +<h4 id="Example_closest-side_for_ellipses">例: 楕円の closest-side</h4> -<p>This example uses the <code>closest-side</code> size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.</p> +この例では大きさに `closest-side` の値を使用しています。つまり、開始点 (中心) からボックスを囲む最近接の辺までの距離で大きさが設定されます。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-ellipse-side"></div> -</pre> +```html hidden +<div class="radial-ellipse-side"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 240px; height: 100px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.radial-ellipse-side { +```css +.radial-ellipse-side { background: radial-gradient(ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige); } -</pre> +``` -<p>{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}</p> +{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }} -<h4 id="Example_farthest-corner_for_ellipses" name="Example_farthest-corner_for_ellipses">例: 楕円の farthest-corner</h4> +<h4 id="Example_farthest-corner_for_ellipses">例: 楕円の farthest-corner</h4> -<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.</p> +この例は、大きさが `farthest-corner` と指定されていることを除けば、前の例と似ています。これは、グラデーションの大きさを、出発点から囲んだボックスの出発点から最も遠い角までの距離で設定するものです。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-ellipse-far"></div> -</pre> +```html hidden +<div class="radial-ellipse-far"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 240px; height: 100px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.radial-ellipse-far { +```css +.radial-ellipse-far { background: radial-gradient(ellipse farthest-corner at 90% 90%, red, yellow 10%, #1e90ff 50%, beige); } -</pre> +``` -<p>{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}</p> +{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }} -<h4 id="Example_closest-side_for_circles" name="Example_closest-side_for_circles">例: 縁の closest-side</h4> +<h4 id="Example_closest-side_for_circles">例: 円の closest-side</h4> -<p>This example uses <code>closest-side</code>, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.</p> +この例では `closest-side` を使用しており、円の大きさが開始点 (中心) と最も近い辺との間の距離になります。円の半径は、グラデーションの中心と最も近い辺との間の距離で、上から 25%、下から 25% の位置関係から、この場合は高さが幅よりも狭いので、最も下に近い位置になります。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="radial-circle-close"></div> -</pre> +```html hidden +<div class="radial-circle-close"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 240px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.radial-circle-close { +```css +.radial-circle-close { background: radial-gradient(circle closest-side at 25% 75%, red, yellow 10%, #1e90ff 50%, beige); } -</pre> +``` + +{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }} + +<h4 id="Example_length_or_percentage_for_ellipses">例: 楕円の長さまたはパーセント値</h4> + +楕円のみの場合、長さまたはパーセント値を使って楕円の大きさを決めることができます。最初の値は水平方向の半径、2 番目の値は垂直方向の半径を表し、パーセント値を使用した場合は、その次元でのボックスの大きさに対応します。以下の例では、水平方向の半径にパーセント値を使用しています。 + +```html hidden +<div class="radial-ellipse-size"></div> +``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-ellipse-size { + background: radial-gradient(ellipse 50% 50px, + red, yellow 10%, #1e90ff 50%, beige); +} +``` + +{{ EmbedLiveSample('Example_length_or_percentage_for_ellipses', 240, 120) }} + +<h4 id="Example_length_for_circles">例: 円の長さ</h4> + +円においては大きさを [\<length>](/ja/docs/Web/CSS/length) で指定することができ、これが円の大きさになります。 + +```html hidden +<div class="radial-circle-size"></div> +``` + +```css hidden +div { + width: 240px; + height: 120px; +} +``` + +```css +.radial-circle-size { + background: radial-gradient(circle 50px, + red, yellow 10%, #1e90ff 50%, beige); +} +``` -<p>{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}</p> +{{ EmbedLiveSample('Example_length_for_circles', 240, 120) }} -<h3 id="Stacked_radial_gradients" name="Stacked_radial_gradients">放射グラデーションの積み重ね</h3> +<h3 id="Stacked_radial_gradients">放射グラデーションの重ね合わせ</h3> -<p>Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.</p> +線形グラデーションのように、放射グラデーションも重ね合わせることができます。最初に指定されたものが最上位に、最後のものが最下位になります。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="stacked-radial"></div> -</pre> +```html hidden +<div class="stacked-radial"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 200px; height: 200px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.stacked-radial { +```css +.stacked-radial { background: radial-gradient(circle at 50% 0, rgba(255,0,0,.5), @@ -489,134 +562,135 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients rgba(0,255,0,0) 70.71%) beige; border-radius: 50%; } -</pre> +``` -<p>{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}</p> +{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }} -<h2 id="Using_conic_gradients" name="Using_conic_gradients">扇形グラデーションの使用</h2> +<h2 id="Using_conic_gradients">扇形グラデーションの使用</h2> -<p><strong><code>conic-gradient()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがありますが、チェッカーボードやその他の面白い効果を生み出すために使用することもできます。</p> +**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがありますが、チェッカーボードやその他の面白い効果を生み出すために使用することもできます。 -<p>扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置され、色経由点はパーセント値または角度で表します。絶対的な長さは有効ではありません。</p> +扇形グラデーションは放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーション線上ではなく、グラデーション弧、すなわち円周上に配置され、色経由点はパーセント値または角度で表します。絶対的な長さは有効ではありません。 -<p>In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.</p> +放射グラデーションでは、楕円の中心から外側に向かって、すべての方向に色が変化していきます。扇形グラデーションでは、円の中心を中心にして、上から時計回りに回転するように色が変化します。放射グラデーションと同様に、グラデーションの中心の位置を決めることができます。線形グラデーションと同様に、グラデーションの角度を変更することができます。 -<div> -<h3 id="A_basic_conic_gradient" name="A_basic_conic_gradient">基本的な扇形グラデーション</h3> +<h3 id="A_basic_conic_gradient">基本的な扇形グラデーション</h3> -<p>As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:</p> +線形グラデーションや放射グラデーションと同様に、扇形グラデーションを作成するのに必要なのは 2 つの色だけです。既定では、グラデーションの中心は 50% 50% の位置で、グラデーションの開始点は上向きです。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="simple-conic"></div> -</pre> +```html hidden +<div class="simple-conic"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.simple-conic { +```css +.simple-conic { background: conic-gradient(red, blue); } -</pre> +``` -<p>{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }} -<div> -<h3 id="Positioning_the_conic_center" name="Positioning_the_conic_center">扇形の中央の配置</h3> +<h3 id="Positioning_the_conic_center">扇形の中心の配置</h3> -<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p> +放射グラデーションのように、扇形グラデーションの中心を配置するには、キーワード、パーセント値、絶対的な長さの何れかをキーワード "at" の後に続けます。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="conic-gradient"></div> -</pre> +```html hidden +<div class="conic-gradient"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.conic-gradient { +```css +.conic-gradient { background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); } -</pre> +``` -<p>{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }} -<div> -<h3 id="Changing_the_angle" name="Changing_the_angle">角度の変更</h3> +<h3 id="Changing_the_angle">角度の変更</h3> -<p>Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"</p> +既定では、指定したそれぞれの色経由点は、円の周囲に等間隔に配置されます。扇形グラデーションの開始角度を指定するには、最初に "from" キーワードを使用し、その後に角度または長さを指定します。また、色経由点の位置を指定するには、それらの後に角度または長さを指定します。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="conic-gradient"></div> -</pre> +```html hidden +<div class="conic-gradient"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.conic-gradient { - background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple); +```css +.conic-gradient { + background: conic-gradient(from 45deg, red, orange 50%, yellow 85%, green); } -</pre> +``` -<p>{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('Changing_the_angle', 120, 120) }} -<h2 id="Using_repeating_gradients" name="Using_repeating_gradients">反復グラデーションの使用</h2> +<h2 id="Using_repeating_gradients">反復グラデーションの使用</h2> -<p>The {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("conic-gradient")}} functions don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, and {{cssxref("repeating-conic-gradient")}} functions are available to offer this functionality.</p> +{{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} の各関数は自動的に反復される色経由点に対応していません。しかし、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} の各関数はこの機能を提供することができます。 -<p>The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.</p> +繰り返されるグラデーション線または弧の大きさは、最初の色経由点の位置と最後の色経由点の位置の間の長さです。最初の色経由点が色だけで、色経由点の位置がなかった場合、値は既定で 0 になります。最後の色経由点が色だけで、色経由点の長さがなかった場合、値はデフォルトで100%になります。どちらも宣言されていない場合、グラデーション線は 100% になります。つまり、線形グラデーションと扇形グラデーションの場合は繰り返されず、放射グラデーションの場合は、グラデーションの半径がグラデーションの中心から最も遠い角までの長さよりも小さい場合にのみ繰り返されます。最初の色経由点が宣言されていて、その値が 0 より大きい場合、最初の色経由点と最後の色経由点の差が 100% または 360 度より小さいため、線または円弧の大きさはグラデーションが繰り返されます。 -<div> -<h3 id="Repeating_linear_gradients" name="Repeating_linear_gradients">反復線形グラデーション</h3> +<h3 id="Repeating_linear_gradients">反復線形グラデーション</h3> -<p>This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.</p> +この例では、{{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} を使用して、直線的に繰り返し進行するグラデーションを作成しています。グラデーションが繰り返されることで、色が循環していきます。この例では、グラデーションの線の長さは 10px です。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="repeating-linear"></div> -</pre> +```html hidden +<div class="repeating-linear"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.repeating-linear { +```css +.repeating-linear { background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px); } -</pre> +``` -<p>{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}</p> -</div> +{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }} -<div> -<h3 id="Multiple_repeating_linear_gradients" name="Multiple_repeating_linear_gradients">複数の反復線形グラデーション</h3> +<h3 id="Multiple_repeating_linear_gradients">複数の反復線形グラデーション</h3> -<p>Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different <a href="/ja/docs/Web/CSS/background-size">background-sizes</a>, optionally with different <a href="/ja/docs/Web/CSS/background-position">background-position</a> property values, for each gradient image. We are using transparency.</p> +通常の線形グラデーションや放射グラデーションと同様に、複数のグラデーションを重ねて表示することができます。これは、グラデーションの一部を透明にして、透明部分から後続のグラデーションが見えるようにしたり、各グラデーション画像に異なる [background-size](/ja/docs/Web/CSS/background-size) や、オプションで異なる [background-position](/ja/docs/Web/CSS/background-position) のプロパティ値を含める場合にのみ意味を持ちます。透過性を利用しています。 -<p>In this case the gradient lines are 300px, 230px, and 300px long.</p> +この例では、グラデーション線の長さは 300px、230px、300px です。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="multi-repeating-linear"></div> -</pre> +```html hidden +<div class="multi-repeating-linear"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 600px; height: 400px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.multi-repeating-linear { +```css +.multi-repeating-linear { background: repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px, rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px, @@ -632,25 +706,27 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients yellow 150px, green 200px, blue 250px, indigo 300px, violet 350px, red 370px); } -</pre> +``` -<p>{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}</p> -</div> +{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }} -<h3 id="Plaid_gradient" name="Plaid_gradient">格子縞のグラデーション</h3> +<h3 id="Plaid_gradient">格子縞のグラデーション</h3> -<p>To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:</p> +格子模様を作るために、透明度のあるグラデーションをいくつか重ねています。最初の背景宣言では、すべての色経由点を個別にリストアップしています。2 つ目の背景のプロパティ宣言では、複数の位置にある色経由点の構文を使用しています。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="plaid-gradient"></div></pre> +```html hidden +<div class="plaid-gradient"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 200px; height: 200px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.plaid-gradient { +```css +.plaid-gradient { background: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, @@ -687,44 +763,48 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients repeating-linear-gradient(45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px); } -</pre> +``` -<p>{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}</p> +{{ EmbedLiveSample('Plaid_gradient', 200, 200) }} -<h3 id="Repeating_radial_gradients" name="Repeating_radial_gradients">反復放射グラデーション</h3> +<h3 id="Repeating_radial_gradients">反復放射グラデーション</h3> -<p>この例は {{cssxref("repeating-radial-gradient")}} を使用して、中央店から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。</p> +この例は {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} を使用して、中心点から放射状に反復されるグラデーションを生成します。色はグラデーションが反復するたびに周期的に繰り返されます。 -<div class="hidden"> -<pre class="brush: html notranslate"><div class="repeating-radial"></div> -</pre> +```html hidden +<div class="repeating-radial"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 120px; height: 120px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.repeating-radial { +```css +.repeating-radial { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } -</pre> +``` -<p>{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}</p> +{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }} -<h3 id="複数の反復放射グラデーション">複数の反復放射グラデーション</h3> +<h3 id="Multiple_repeating_radial_gradients">複数の反復放射グラデーション</h3> -<div class="hidden"> -<pre class="brush: html notranslate"><div class="multi-target"></div> -</pre> +```html hidden +<div class="multi-target"></div> +``` -<pre class="brush: css notranslate">div { +```css hidden +div { width: 250px; height: 150px; -}</pre> -</div> +} +``` -<pre class="brush: css notranslate">.multi-target { +```css +.multi-target { background: repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5), rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px, @@ -734,17 +814,15 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients rgba(255,255,255,0.5) 20px) top left no-repeat yellow; background-size: 200px 200px, 150px 150px; } -</pre> +``` -<p>{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}</p> +{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }} -<h2 id="See_also" name="See_also">関連記事</h2> +## 関連記事 -<ul> - <li>グラデーション関数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li> - <li>グラデーション関連の CSS データ型: {{cssxref("<gradient>")}}, {{cssxref("<image>")}}</li> - <li>グラデーション関連の CSS プロパティ: {{cssxref("background")}}, {{cssxref("background-image")}}</li> - <li><a class="external" href="http://lea.verou.me/css3patterns/">CSS Gradients Patterns Gallery, by Lea Verou</a></li> - <li><a class="external" href="http://standardista.com/cssgradients">CSS3 Gradients Library, by Estelle Weyl</a></li> - <li><a href="https://cssgenerator.org/gradient-css-generator.html">Gradient CSS Generator</a></li> -</ul> +- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- グラデーション関連の CSS データ型: {{cssxref("<gradient>")}}, {{cssxref("<image>")}} +- グラデーション関連の CSS プロパティ: {{cssxref("background")}}, {{cssxref("background-image")}} +- [CSS Gradients Patterns Gallery, by Lea Verou](https://lea.verou.me/css3patterns/) +- [CSS3 Gradients Library, by Estelle Weyl](http://standardista.com/cssgradients) +- [Gradient CSS Generator](https://cssgenerator.org/gradient-css-generator.html) diff --git a/files/ja/web/css/element()/index.md b/files/ja/web/css/element()/index.md index d8922ccaeb..ae781e3bf0 100644 --- a/files/ja/web/css/element()/index.md +++ b/files/ja/web/css/element()/index.md @@ -5,97 +5,85 @@ tags: - CSS - CSS 関数 - CSS4-images + - 関数 + - レイアウト - Reference - ウェブ - - レイアウト +browser-compat: css.types.image.element translation_of: Web/CSS/element() --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}}{{SeeCompatTable}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>element()</code></strong> 関数は、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。</p> +**`element()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。 -<p>特に便利な使い道は、 {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。</p> +特に便利な使い道としては、HTML の {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。 -<p>Gecko ブラウザでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。</p> +Gecko ブラウザーでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="syntaxbox notranslate">element(<var>id</var>)</pre> +```css +element(id) +``` -<p>where:</p> +ここで: -<dl> - <dt><var>id</var></dt> - <dd>背景として使う要素の ID です。要素の HTML 属性 #<var>id</var> に定義されているものです。</dd> -</dl> +- _id_ + - : 背景として使う要素の ID です。要素の HTML 属性 #_id_ に定義されているものです。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<p><a href="/samples/cssref/moz-element.html" title="https://developer.mozilla.org/samples/cssref/moz-element.html">この例は</a> <code>-moz-element()</code> に対応している Firefox で実動例を見ることができます。</p> +この例を[ライブで見る](https://media.prod.mdn.mozit.cloud/samples/cssref/moz-element.html)には、`-moz-element()` に対応している Firefox が必要です。 -<h3 id="A_somewhat_realistic_example" name="A_somewhat_realistic_example">ある程度現実的な例</h3> +<h3 id="A_somewhat_realistic_example">いくらか現実的な例</h3> -<p>この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。</p> +この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。 -<pre class="brush: html notranslate"><div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;"> - <p>This box uses the element with the #myBackground1 ID as its background!</p> -</div> +```html +<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;"> + <p>This box uses the element with the #myBackground1 ID as its background!</p> +</div> -<div style="overflow:hidden; height:0;"> - <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> - <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p> - </div> -</div></pre> +<div style="overflow:hidden; height:0;"> + <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> + <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p> + </div> +</div> +``` -<p>"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの、背景に使われています。</p> +"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの背景に使われています。 -<p><img alt="example1.png" class="default internal" src="/@api/deki/files/4624/=example1.png"></p> + -<h3 id="A_somewhat_more_bizarre_example" name="A_somewhat_more_bizarre_example">ある程度とっぴな例</h3> +<h3 id="A_somewhat_more_bizarre_example">いくらか突飛な例</h3> -<p>この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。</p> +この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。 -<pre class="brush: html notranslate"><div style="width:400px; height:100px; background:-moz-element(#myBackground2);"> -</div> +```html +<div style="width:400px; height:100px; background:-moz-element(#myBackground2);"> +</div> -<div style="overflow:hidden; height:0;"> - <button id="myBackground2" type="button">Evil button!</button> -</div> -</pre> +<div style="overflow:hidden; height:0;"> + <button id="myBackground2" type="button">Evil button!</button> +</div> +``` -<p><img alt="example2.png" class="default internal" src="/@api/deki/files/4625/=example2.png"></p> + -<h2 id="Specifications" name="Specifications">仕様書</h2> +## Specifications -<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 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>CSS3 Images から延期</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## Browser compatibility -<div>{{Compat("css.types.image.element")}}</div> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## See also -<ul> - <li>{{cssxref("_image", "image()")}}</li> - <li>{{cssxref("image-set", "image-set()")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("cross-fade")}}</li> - <li>{{domxref("document.mozSetImageElement()")}}</li> -</ul> +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("<image>")}} +- {{cssxref("<gradient>")}} +- {{cssxref("element()")}} +- {{cssxref("cross-fade()")}} +- {{domxref("document.mozSetImageElement()")}} diff --git a/files/ja/web/css/gradient/conic-gradient()/index.md b/files/ja/web/css/gradient/conic-gradient()/index.md index 7372d1f6bb..d5e01f3ad7 100644 --- a/files/ja/web/css/gradient/conic-gradient()/index.md +++ b/files/ja/web/css/gradient/conic-gradient()/index.md @@ -72,7 +72,7 @@ background: conic-gradient( ### 扇型グラデーションの構成 -<p>扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。</p> +扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。  diff --git a/files/ja/web/css/gradient/index.md b/files/ja/web/css/gradient/index.md index 5123beb559..f3cd62517d 100644 --- a/files/ja/web/css/gradient/index.md +++ b/files/ja/web/css/gradient/index.md @@ -6,7 +6,7 @@ tags: - CSS Data Type - CSS Images - Data Type - - Graphics + - グラフィック - Layout - Reference browser-compat: css.types.image.gradient @@ -14,7 +14,7 @@ translation_of: Web/CSS/gradient --- {{CSSRef}} -The **`<gradient>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 2 色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。 +**`<gradient>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 2 色以上の連続的な色の変化で構成される特殊な型の {{cssxref("<image>")}} です。 {{EmbedInteractiveExample("pages/css/type-gradient.html")}} @@ -30,7 +30,7 @@ CSS グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS #### 放射グラデーション -放射グラデーション (radical gradient) は、色が中央点 (origin) から連続的に変化します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数で生成されます。 +放射グラデーション (radical gradient) は、色が中心点 (origin) から連続的に変化します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} 関数で生成されます。 #### 反復グラデーション diff --git a/files/ja/web/css/image-orientation/index.md b/files/ja/web/css/image-orientation/index.md index 7366e9755b..bbb8eb4009 100644 --- a/files/ja/web/css/image-orientation/index.md +++ b/files/ja/web/css/image-orientation/index.md @@ -3,127 +3,111 @@ title: image-orientation slug: Web/CSS/image-orientation tags: - CSS - - CSS Image - - CSS Property - - CSS プロパティ - CSS 画像 + - CSS プロパティ - EXIF - - Experimental + - 実験的 + - 画像補正 + - 画像の向き + - Deprecated + - 向き - Reference - image-orientation - - リファレンス - - 画像の向き - - 画像補正 + - recipe:css-property +browser-compat: css.properties.image-orientation translation_of: Web/CSS/image-orientation --- -<p><span class="seoSummary"><strong><code>image-orientation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。</span>向きの調整以外に使用しては<em>いけません</em>。そのような場合は、 {{cssxref("transform")}} プロパティで <code>rotate</code> {{cssxref("<transform-function>")}} の値を使用してください。</p> +**`image-orientation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。 -<div class="warning"> -<p><strong>警告:</strong> このプロパティは仕様書で非推奨となっています。この機能は {{HTMLElement("img")}} や {{HTMLElement("picture")}} 要素のプロパティに、おそらく <code>from-image</code> の例外を除いて移行する可能性があります。 <code>flip</code> および <code><angle></code> の値は Firefox 63 で廃止されました。</p> -</div> +> **Note:** `from-image` と `none` 以外の値は、仕様書では非推奨とされています。 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ image-orientation: none; image-orientation: from-image; /* 画像の EXIF データを使用 */ /* グローバル値 */ image-orientation: inherit; image-orientation: initial; +image-orientation: revert; image-orientation: unset; /* 廃止された値 {{obsolete_inline(63)}} */ image-orientation: 90deg; /* 90度回転 */ image-orientation: 90deg flip; /* 90度回転して、水平方向に反転 */ -image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */</pre> - -<p>{{cssinfo}}</p> +image-orientation: flip; /* 回転せず、水平方向の反転のみ適用 */ +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>none</code></dt> - <dd>既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。</dd> - <dt><code>from-image</code></dt> - <dd>画像に含まれている {{interwiki("wikipedia", "EXIF")}} 情報を使用して、画像の向きを適切にします。</dd> - <dt>{{cssxref("<angle>")}} {{non-standard_inline}}{{obsolete_inline(63)}}</dt> - <dd>画像を回転させる {{cssxref("<angle>")}}。 もっとも近い <code>90deg</code> (<code>0.25turn</code>) 単位の値に丸められます。</dd> - <dt><code>flip</code> {{non-standard_inline}}{{obsolete_inline(63)}}</dt> - <dd>{{cssxref("<angle>")}} 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。 {{cssxref("<angle>")}} を指定しない場合は、 <code>0deg</code> を使用します。</dd> -</dl> +- `none` + - : 既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。 +- `from-image` + - : 画像に含まれている {{interwiki("wikipedia", "EXIF")}} 情報を使用して、画像の向きを適切にします。 +- {{cssxref("<angle>")}}{{deprecated_inline}} + - : 画像を回転させる {{cssxref("<angle>")}}。 もっとも近い `90deg` (`0.25turn`) 単位の値に丸められます。 +- `flip`{{deprecated_inline}} + - : {{cssxref("<angle>")}} 値に従って回転した後に、画像を水平方向に反転します (つまり鏡像にします)。{{cssxref("<angle>")}} を指定しない場合は、 `0deg` が使用されます。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 解説 -{{csssyntax}} - -<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> +このプロパティは、回転したカメラで撮影された画像の方向を修正するため*だけ*を目的としています。自由に回転させるために使用するべきでは*ありません*。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、{{cssxref("transform")}} プロパティに `rotate` キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。 -<p>このプロパティは、回転したカメラで撮影された画像の方向を修正するため<em>だけ</em>を目的としています。自由に回転させるために使用するべきでは<em>ありません</em>。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、 {{cssxref("transform")}} プロパティに <code>rotate</code> キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。</p> +{{cssxref("<transform-function>")}} などの他の CSS プロパティとの組み合わせで使用された場合、 `image-orientation` による回転は、常に他の変形が行われる前に適用されます。 -<p>{{cssxref("<transform-function>")}} などの他の CSS プロパティとの組み合わせで使用された場合、 <code>image-orientation</code> による回転は、常に他の変形が行われる前に適用されます。</p> +## Formal definition -<h2 id="Example" name="Example">例</h2> +{{cssinfo}} -<h3 id="CSS">CSS</h3> +## Formal syntax -<pre class="brush: css">#image { - image-orientation: from-image; /* ライブ例の中で変更することができます */ -} -</pre> +{{csssyntax}} -<div class="hidden"> -<h3 id="HTML">HTML</h3> +## Examples -<pre class="brush: html"><img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg" - alt="Orientation taken from the image"> -<select id="imageOrientation"> - <option value="from-image">from-image</option> - <option value="none">none</option> -</select> -</pre> +<h3 id="Orienting_image_from_image_data">画像データから画像の向きを変更</h3> -<h3 id="JavaScript">JavaScript</h3> +#### CSS -<pre class="brush: js">var imageOrientation = document.getElementById("imageOrientation"); +```css +#image { + image-orientation: from-image; /* ライブ例の中で変更することができます */ +} +``` + +```html hidden +<img id="image" src="mdn.svg" + alt="Orientation taken from the image"> +<select id="imageOrientation"> + <option value="from-image">from-image</option> + <option value="none">none</option> +</select> +``` + +```js hidden +var imageOrientation = document.getElementById("imageOrientation"); imageOrientation.addEventListener("change", function (evt) { document.getElementById("image").style.imageOrientation = evt.target.value; }); -</pre> -</div> +``` -<h3 id="Result" name="Result">結果</h3> +#### 結果 -<p>{{EmbedLiveSample("Example", "100%", 240)}}</p> +{{EmbedLiveSample("Orienting_image_from_image_data", "100%", 240)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## Specifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Images', '#the-image-orientation', 'image-orientation')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## Browser compatibility -<p>{{Compat("css.properties.image-orientation")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## See also -<ul> - <li>ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}</li> - <li>{{cssxref("transform")}} および {{cssxref("rotate")}}</li> -</ul> +- その他の画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}} +- {{cssxref("transform")}} および {{cssxref("rotate")}} -<div>{{CSSRef}}</div> +{{CSSRef}} diff --git a/files/ja/web/css/image-orientation/mdn.svg b/files/ja/web/css/image-orientation/mdn.svg new file mode 100644 index 0000000000..bbdbacc6fc --- /dev/null +++ b/files/ja/web/css/image-orientation/mdn.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="200" width="226.855"><defs><linearGradient gradientTransform="translate(-353.18 -4908.622) scale(6.99647)" gradientUnits="userSpaceOnUse" id="a" y2="701.6" x2="66.7" y1="730.2" x1="66.7"><stop offset="0" style="stop-color:#2075bc;stop-opacity:1"/><stop offset="1" style="stop-color:#29aae1;stop-opacity:1"/></linearGradient><linearGradient gradientTransform="translate(-353.18 -4908.622) scale(6.99647)" gradientUnits="userSpaceOnUse" id="b" y2="701.6" x2="54.6" y1="730.2" x1="54.6"><stop offset="0" style="stop-color:#0a6aa8;stop-opacity:1"/><stop offset="1" style="stop-color:#1699c8;stop-opacity:1"/></linearGradient><linearGradient gradientTransform="translate(-353.18 -4908.622) scale(6.99647)" gradientUnits="userSpaceOnUse" id="c" y2="701.6" x2="70.7" y1="730.2" x1="70.7"><stop offset="0" style="stop-color:#0a6aa8;stop-opacity:1"/><stop offset="1" style="stop-color:#1699c8;stop-opacity:1"/></linearGradient></defs><path style="fill:url(#a)" d="m56.89 0-.353.354L0 22.969V200l56.537-21.555L113.427 200l56.538-21.555L226.855 200V22.969L169.965.354 169.61 0v.354l-56.183 22.261L56.89.354V0zm43.026 42.215c.968.017 1.938.077 2.91.187 7.067 1.767 13.783 4.595 20.85 6.008 6.36-1.767 14.487-3.533 20.494.707 3.887 3.887 7.773 8.48 6.006 14.487 10.954 12.014 34.983 13.427 41.697 22.615 1.06 1.413.353 11.66 2.473 17.668l.707 2.828c-2.12 4.24-7.068 15.9-5.301 13.426-1.767 2.473-3.534 3.18-8.48 2.12-4.24 2.828-6.714 4.24-11.307 6.714-4.947 1.06-15.9-2.474-20.848-3.534-9.187-1.766-9.894.354-18.021 4.594-12.014 6.007-9.541 20.85-14.135 29.33 0 1.06.354 1.766.707 2.826s.707 1.766.707 2.473c-13.78 1.767-27.209-.352-39.576-6.36-9.54-4.593-17.667-11.661-24.381-20.142 1.413-.707 3.178-1.766 4.592-2.473 1.06-.353 2.121-1.06 2.828-1.414H60.07c-3.18-.706-1.413-.353-3.886-.353 2.826-3.18 6.715-6.006 7.068-6.36l.352-.353c-3.534 1.06-8.834 2.474-11.66 5.3 1.06-4.946 4.594-8.128 6.36-12.015-4.24 2.12-8.481 4.949-12.015 8.13 0-3.888 4.595-7.776 6.715-10.956 1.413-2.12 3.534-3.886 4.594-6.36-4.24 1.414-14.135 6.713-18.022 9.186 1.767-6.007 9.895-15.193 14.488-19.787-4.593.353-14.134 6.007-18.021 8.127 0-.353.353-.707 0-1.06 3.18-4.948 12.72-12.721 17.314-16.608-5.3.707-15.9 6.36-20.847 8.127 4.24-7.774 18.374-17.313 25.088-22.967l-16.254 4.24c-2.474 0-4.595 1.766-6.715 1.413 8.48-8.481 25.796-23.322 37.103-30.39 0 0 13.665-9.626 28.184-9.374z"/><path style="fill:url(#b)" d="M56.89 0 0 22.969V200l56.89-21.555v-37.304a85.988 85.988 0 0 1-2.472-2.979 68.24 68.24 0 0 0 2.473-1.33v-2.936c-.21.011-.344.026-.707.026.226-.255.469-.503.707-.752v-3.707c-1.89.797-3.674 1.773-4.948 3.047.823-3.838 3.128-6.615 4.948-9.48v-1.8c-3.761 2.02-7.461 4.566-10.602 7.393 0-3.887 4.595-7.775 6.715-10.955 1.148-1.722 2.753-3.216 3.887-5.04v-1.05c-4.53 1.687-13.615 6.562-17.315 8.916 1.767-6.007 9.895-15.193 14.488-19.787-4.593.353-14.134 6.007-18.021 8.127 0-.353.353-.707 0-1.06 3.18-4.948 12.72-12.721 17.314-16.608-5.3.707-15.9 6.36-20.847 8.127 4.108-7.531 17.444-16.688 24.38-22.395v-.388l-15.546 4.056c-2.474 0-4.595 1.766-6.715 1.413 5.224-5.225 13.802-12.857 22.262-19.604V0z"/><path style="fill:url(#c)" d="m169.965 0-56.537 22.969v22.627c3.386 1.083 6.775 2.12 10.248 2.814 6.36-1.767 14.487-3.533 20.494.707 3.887 3.887 7.773 8.48 6.006 14.487 4.891 5.364 12.39 8.613 19.789 11.386V0zm-26.397 124.818c-4.455.05-6.377 2.037-12.472 5.217-12.014 6.007-9.541 20.85-14.135 29.33 0 1.06.354 1.766.707 2.826s.707 1.766.707 2.473a74.51 74.51 0 0 1-4.947.465V200l56.537-21.555v-49.47c-4.947 1.06-15.9-2.474-20.848-3.534-2.297-.441-4.063-.64-5.549-.623z"/></svg>
\ No newline at end of file diff --git a/files/ja/web/css/image-rendering/blumen.jpg b/files/ja/web/css/image-rendering/blumen.jpg Binary files differnew file mode 100644 index 0000000000..1eae597125 --- /dev/null +++ b/files/ja/web/css/image-rendering/blumen.jpg diff --git a/files/ja/web/css/image-rendering/index.md b/files/ja/web/css/image-rendering/index.md index c158a3d034..d4bfadd6ac 100644 --- a/files/ja/web/css/image-rendering/index.md +++ b/files/ja/web/css/image-rendering/index.md @@ -3,21 +3,26 @@ title: image-rendering slug: Web/CSS/image-rendering tags: - CSS - - CSS プロパティ - CSS 画像 + - CSS プロパティ - Reference - image-rendering + - recipe:css-property +browser-compat: css.properties.image-rendering translation_of: Web/CSS/image-rendering --- -<div>{{CSSRef}}</div> +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`image-rendering`** プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。 -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>image-rendering</code></strong> プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。</p> +{{EmbedInteractiveExample("pages/css/image-rendering.html")}} -<p>{{Glossary("User agent", "ユーザーエージェント")}}は、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が <code>100×100px</code> であって、実際の寸法が <code>200×200px</code> (または <code>50×50px</code>) であるとき、画像は <code>image-rendering</code> で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。</p> +{{Glossary("User agent", "ユーザーエージェント")}}は、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が `100×100px` であって、実際の寸法が `200×200px` (または `50×50px`) であるとき、画像は `image-rendering` で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; @@ -25,50 +30,57 @@ image-rendering: pixelated; /* グローバル値 */ image-rendering: inherit; image-rendering: initial; -image-rendering: unset;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko は<ruby><em>バイリニア</em><rp> (</rp><rt>bilinear</rt><rp>) </rp></ruby>再サンプリングを使用します (high-quality)。</dd> - <dt><code>smooth</code> {{Experimental_Inline}}</dt> - <dd>画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。</dd> - <dt><code style="white-space: nowrap;">high-quality</code> {{Experimental_Inline}}</dt> - <dd><code>smooth</code> と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。 <code style="white-space: nowrap;">high-quality</code> の画像は他の値よりも優先されます。</dd> - <dt><code style="white-space: nowrap;">crisp-edges</code></dt> - <dd>画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。<ruby>最近傍<rp> (</rp>nearest neighbor<rp>) </rp></ruby>法や、 2×SaI や <a href="https://en.wikipedia.org/wiki/Hqx">hqx-family</a> のような<a href="https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms">その他のスムーズ化が行われない拡大縮小アルゴリズム</a>などが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。</dd> - <dt><code>pixelated</code></dt> - <dd>画像を拡大する時は、<ruby>最近傍<rp> (</rp>nearest neighbor<rp>) </rp></ruby>法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は <code>auto</code> と同じになります。</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> <code>optimizeQuality</code> および <code>optimizeSpeed</code> の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) <code>smooth</code> および <code>pixelated</code> の同義語として定義されていました。</p> -</div> +image-rendering: revert; +image-rendering: unset; +``` + +### 値 + +- `auto` + - : 拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko は*バイリニア* (bilinear) 再サンプリングを使用します (high-quality)。 +- `smooth` {{Experimental_Inline}} + - : 画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。 +- `high-quality` {{Experimental_Inline}} + - : `smooth` と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。`high-quality` の画像は他の値よりも優先されます。 +- `crisp-edges` + - : 画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、 2×SaI や [hqx-family](https://en.wikipedia.org/wiki/Hqx) のような[その他のスムーズ化が行われない拡大縮小アルゴリズム](https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms)などが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。 +- `pixelated` + - : 画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は `auto` と同じになります。 + +> **Note:** `optimizeQuality` および `optimizeSpeed` の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) `smooth` および `pixelated` の同義語として定義されていました。 + +## Formal definition + +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## Formal syntax -{{CSSSyntax}} +{{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## Examples -<div class="hidden"> -<pre class="brush: html"><div> - <img class="auto" alt="auto" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /> - <img class="pixelated" alt="pixelated" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /> - <img class="crisp-edges" alt="crisp-edges" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /> -</div> -</pre> +<h3 id="Setting_image_scaling_algorithms">画像の拡大縮小アルゴリズムの設定</h3> + +実際の使用では、 `pixelated` と `crisp-edges` のルールを組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際のルールにフォールバックを追加するだけです。) [Canvas API](/ja/docs/Web/API/Canvas_API) は手動の画像データ操作または [`imageSmoothingEnabled`](/ja/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) によって [`pixelated` の代替ソリューション](http://phrogz.net/tmp/canvas_image_zoom.html) を提供することができます。 + +```html hidden +<div> + <img class="auto" alt="auto" src="blumen.jpg" /> + <img class="pixelated" alt="pixelated" src="blumen.jpg" /> + <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" /> </div> +``` -<div class="hidden"> -<pre class="brush: css">img { +```css hidden +img { height: 200px; } -</pre> -</div> +``` + +#### CSS -<pre class="brush: css">.auto { +```css +.auto { image-rendering: auto; } @@ -81,47 +93,24 @@ image-rendering: unset;</pre> image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } -</pre> +``` -<p>{{EmbedLiveSample('Examples')}}</p> +#### Result -<div class="blockIndicator note"> -<p><strong>メモ:</strong> 実際の仕様では、 <code>pixelated</code> と <code>crisp-edges</code> の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は手動の画像データ操作または <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code> によって <a href="http://phrogz.net/tmp/canvas_image_zoom.html"><code>pixelated</code> の代替ソリューション</a> を提供することができます。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{EmbedLiveSample('Setting_image_scaling_algorithms')}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Images", "#the-image-rendering", "image-rendering")}}</td> - <td>{{Spec2("CSS3 Images")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## Specifications -<p>{{CSSInfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## Browser compatibility -<p>{{Compat("css.properties.image-rendering")}}</p> +{{Compat}} -<div class="blockIndicator note"> -<p><strong>メモ:</strong> 仕様書の例にあるようなピクセルアートの拡大縮小には <code>crisp-edges</code> を使うことが想定されていますが、実際にはどのブラウザーも (2020年1月時点で) 対応していません。 <a href="https://dxr.mozilla.org/mozilla-central/rev/5fd4cfacc90ddd975c82ba27fdc56f4187b3f180/gfx/wr/webrender/src/resource_cache.rs#1727">Firefox</a> では、 <code>pixelated</code> は最近傍法として解釈されますが、 <code>auto</code> と <code>crisp-edges</code> はトリリニア法または線形で補間されます。</p> - -<p>Chromium と Safari (WebKit) での動作については、 <code><a href="https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/style/computed_style.cc?type=cs&q=GetInterpolationQuality&g=0&l=1160">GetInterpolationQuality</a></code> 関数と <code><a href="https://github.com/WebKit/webkit/blob/9b169b6c85394d94f172e5d75ca2f6c74830e99c/Source/WebCore/css/CSSPrimitiveValueMappings.h#L4324">CSSPrimitiveValue::operator ImageRendering()</a></code> をそれぞれ参照してください。</p> -</div> +> **Note:** 仕様書の例にあるようなピクセルアートの拡大縮小には `crisp-edges` を使うことが想定されていますが、実際にはどのブラウザーも (2020 年 1 月時点で) 対応していません。[Firefox](https://dxr.mozilla.org/mozilla-central/rev/5fd4cfacc90ddd975c82ba27fdc56f4187b3f180/gfx/wr/webrender/src/resource_cache.rs#1727) では、 `pixelated` は最近傍法として解釈されますが、 `auto` と `crisp-edges` はトリリニア法または線形で補間されます。 +> +> Chromium と Safari (WebKit) での動作については、 [`GetInterpolationQuality`](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/style/computed_style.cc?type=cs&q=GetInterpolationQuality&g=0&l=1160) 関数と [`CSSPrimitiveValue::operator ImageRendering()`](https://github.com/WebKit/webkit/blob/9b169b6c85394d94f172e5d75ca2f6c74830e99c/Source/WebCore/css/CSSPrimitiveValueMappings.h#L4324) をそれぞれ参照してください。 -<h2 id="See_also" name="See_also">関連情報</h2> +## See also -<ul> - <li>その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> -</ul> +- その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}} diff --git a/files/ja/web/css/image-resolution/index.md b/files/ja/web/css/image-resolution/index.md index e82233bdd5..2ca8ba9fc4 100644 --- a/files/ja/web/css/image-resolution/index.md +++ b/files/ja/web/css/image-resolution/index.md @@ -3,18 +3,19 @@ title: image-resolution slug: Web/CSS/image-resolution tags: - CSS - - CSS Images - - CSS Property - - Experimental + - CSS 画像 + - CSS プロパティ + - 実験的 - Reference - image-resolution browser-compat: css.properties.image-resolution +translation_of: Web/CSS/image-resolution --- {{CSSRef}}{{SeeCompatTable}} -The **`image-resolution`** [CSS](/en-US/docs/Web/CSS) property specifies the intrinsic resolution of all raster images used in or on the element. It affects content images such as replaced elements and generated content, and decorative images such as `background-image` images. +**`image-resolution`** は [CSS](/ja/docs/Web/CSS) のプロパティで、この要素で使用されているすべてのラスター画像の内在解像度を指定します。これは置換要素や生成コンテンツ、`background-image` のような装飾画像などのコンテンツ画像に作用します。 -The image resolution is defined as the number of image pixels per unit length, e.g., pixels per inch. By default, CSS assumes a resolution of one image pixel per CSS px unit; however, the `image-resolution` property allows a different resolution to be specified. +画像の解像度は、単位の長さあたりの画像ピクセル数として定義されています (例: 1 インチあたりのピクセル数)。既定では、CSS は CSS ピクセル単位に 1 つの画像ピクセルの解像度を想定していますが、`image-resolution` プロパティを使用することで、異なる解像度を指定することができます。 ## Syntax @@ -34,13 +35,13 @@ image-resolution: unset; ### Values - `{{cssxref("<resolution>")}}` - - : Specifies the intrinsic resolution explicitly. + - : 内在解像度を明示的に指定します。 - `from-image` - - : Uses the intrinsic resolution as specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to `1dppx` (1 image pixel per CSS px unit). + - : 画像形式で指定された内在解像度を使用します。画像が自身の解像度を指定しなかった場合、明示的に指定された解像度が (与えられていれば) 使用し、そうでなければ既定で `1dppx` (1 画像ピクセル毎 CSS ピクセル)となります。 - `snap` - - : If the `snap` keyword is provided, the computed resolution is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used intrinsic resolution is the image's native resolution similarly adjusted. + - : `snap` キーワードが指定された場合、計算された解像度は、指定された解像度を、画像の 1 ピクセルを端末の整数のピクセルにマッピングする最も近い値に丸めたものになります。解像度が画像から取得された場合、使用される固有の解像度は、画像のネイティブ解像度を同様に調整したものになります。 -> **Note:** As vector formats such as SVG do not have an intrinsic resolution, this property has no effect on vector images. +> **Note:** SVG などのベクター形式は内在解像度を持たないので、このプロパティはベクター画像には影響しません。 ## Formal definition @@ -52,9 +53,9 @@ image-resolution: unset; ## Examples -### Setting a high dpi for print +### 印刷用に高い dpi を設定 -When printing the document, use a higher resolution. +文書を印刷する場合、より高い解像度を使用します。 ```css @media print { @@ -64,9 +65,9 @@ When printing the document, use a higher resolution. } ``` -### Use image resolution with fallback +### フォールバック付きの画像の解像度を使用する -Uses the resolution from the image. If the image does not have a resolution, use 300dpi rather than the default 1dppx. +画像から解像度を使用します。画像に解像度がない場合は、既定の 1dppx ではなく 300dpi を使用します。 ```css .myimage { @@ -84,5 +85,5 @@ Uses the resolution from the image. If the image does not have a resolution, use ## See also -- Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}. +- その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}. - [Chromium bug: 1086473](https://bugs.chromium.org/p/chromium/issues/detail?id=1086473). diff --git a/files/ja/web/css/image/image()/index.md b/files/ja/web/css/image/image()/index.md index e550541331..096eb8b87f 100644 --- a/files/ja/web/css/image/image()/index.md +++ b/files/ja/web/css/image/image()/index.md @@ -3,19 +3,19 @@ title: image() slug: Web/CSS/image/image() tags: - CSS - - CSS Function - - CSS Images - - Function + - CSS 関数 + - CSS 画像 + - 関数 - Reference - - Web + - ウェブ browser-compat: css.types.image.image translation_of: Web/CSS/image/image() --- {{CSSRef}} -The **`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。 +**`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。 -> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '<code>HTMLImageElement</code> のコンストラクターである <code>Image()</code>', '', 1)}} と混同しないでください。 +> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '`HTMLImageElement` のコンストラクターである `Image()`', '', 1)}} と混同しないでください。 ## 構文 diff --git a/files/ja/web/css/image/index.md b/files/ja/web/css/image/index.md index 26c1d0939c..28a716953c 100644 --- a/files/ja/web/css/image/index.md +++ b/files/ja/web/css/image/index.md @@ -4,12 +4,12 @@ slug: Web/CSS/image tags: - CSS - CSS Data Type - - CSS Images + - CSS 画像 - Data Type - - Graphics + - グラフィック - Layout - Reference - - Web + - ウェブ browser-compat: css.types.image translation_of: Web/CSS/image --- @@ -22,7 +22,7 @@ translation_of: Web/CSS/image `<image>` データ型は以下のいずれかによって表すことができます。 - {{CSSxRef("url()", "url()")}} データ型で記述された画像 -- {{CSSxRef("<gradient>")}} データ型 +- {{CSSxRef("<gradient>")}} データ型 - {{CSSxRef("element()","element()")}} 関数で定義されたウェブページの一部 - {{CSSxRef("image/image()","image()")}} 関数で定義された画像、画像フラグメント、単色の色 - {{CSSxRef("cross-fade()","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成 diff --git a/files/ja/web/css/object-fit/index.md b/files/ja/web/css/object-fit/index.md index f3cd681f5e..81c6393a75 100644 --- a/files/ja/web/css/object-fit/index.md +++ b/files/ja/web/css/object-fit/index.md @@ -3,105 +3,118 @@ title: object-fit slug: Web/CSS/object-fit tags: - CSS - - CSS プロパティ - CSS 画像 - - object-fit - - リファレンス + - CSS プロパティ - レイアウト + - Reference + - css レイアウト + - object-fit + - recipe:css-property - 寸法 +browser-compat: css.properties.object-fit translation_of: Web/CSS/object-fit --- -<div>{{CSSRef}}</div> +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`object-fit`** プロパティは、[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。 -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>object-fit</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。</p> +要素のボックス内における置換要素の中身のオブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。 -<p>要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。</p> +{{EmbedInteractiveExample("pages/css/object-fit.html")}} -<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div> +## 構文 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +```css +object-fit: contain; +object-fit: cover; +object-fit: fill; +object-fit: none; +object-fit: scale-down; -<h2 id="Syntax" name="Syntax">構文</h2> +/* グローバル値 */ +object-fit: inherit; +object-fit: initial; +object-fit: revert; +object-fit: unset; +``` -<p><code>object-fit</code> プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。</p> +`object-fit` プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>contain</code></dt> - <dd>置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、<a href="https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%BF%E3%83%BC%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9_(%E6%98%A0%E5%83%8F%E6%8A%80%E8%A1%93)">レターボックス</a>表示になります。</dd> - <dt><code>cover</code></dt> - <dd>置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。</dd> - <dt><code>fill</code></dt> - <dd>置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。</dd> - <dt><code>none</code></dt> - <dd>置換コンテンツは、拡大縮小されません。</dd> - <dt><code>scale-down</code></dt> - <dd>コンテンツは <code>none</code> 又は <code>contain</code> を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。</dd> -</dl> +- `contain` + - : 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、[レターボックス](https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%BF%E3%83%BC%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9_(%E6%98%A0%E5%83%8F%E6%8A%80%E8%A1%93))表示になります。 +- `cover` + - : 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。 +- `fill` + - : 置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。 +- `none` + - : 置換コンテンツは、拡大縮小されません。 +- `scale-down` + - : コンテンツは `none` または `contain` を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## Formal definition + +{{cssinfo}} + +## Formal syntax {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="HTML">HTML</h3> +<h3 id="Setting_object-fit_for_an_image">画像に object-fit を設定</h3> -<pre class="brush: html"><div> - <h2>object-fit: fill</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> +#### HTML - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/> +```html +<section> + <h2>object-fit: fill</h2> + <img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo"> - <h2>object-fit: contain</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> + <img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/> + <h2>object-fit: contain</h2> + <img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo"> - <h2>object-fit: cover</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> + <img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/> + <h2>object-fit: cover</h2> + <img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo"> - <h2>object-fit: none</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> + <img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/> + <h2>object-fit: none</h2> + <img class="none" src="mdn_logo_only_color.png" alt="MDN Logo"> - <h2>object-fit: scale-down</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> + <img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo"> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/> + <h2>object-fit: scale-down</h2> + <img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo"> -</div></pre> + <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo"> +</section> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">h2 { +```css +h2 { font-family: Courier New, monospace; font-size: 1em; margin: 1em 0 0.3em; } -div { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: flex-start; - height: 940px; -} - img { width: 150px; height: 100px; border: 1px solid #000; + margin: 10px 0; } .narrow { width: 100px; height: 150px; - margin-top: 10px; } .fill { @@ -123,45 +136,21 @@ img { .scale-down { object-fit: scale-down; } -</pre> - -<h3 id="Output" name="Output">出力結果</h3> - -<p>{{ EmbedLiveSample('Example', 500, 450) }}</p> - -<h2 class="cleared" 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 Images', '#the-object-fit', 'object-fit')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.object-fit")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>他の画像関連 CSS プロパティ: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}</li> - <li>{{cssxref("background-size")}}</li> -</ul> +``` + +#### Result + +{{ EmbedLiveSample('Setting_object-fit_for_an_image', 500, 1100) }} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- その他の画像関連 CSS プロパティ: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}} +- {{cssxref("background-size")}} diff --git a/files/ja/web/css/object-fit/mdn_logo_only_color.png b/files/ja/web/css/object-fit/mdn_logo_only_color.png Binary files differnew file mode 100644 index 0000000000..444f6d6274 --- /dev/null +++ b/files/ja/web/css/object-fit/mdn_logo_only_color.png diff --git a/files/ja/web/css/object-position/index.md b/files/ja/web/css/object-position/index.md index 81b998bbc8..51d6f63a95 100644 --- a/files/ja/web/css/object-position/index.md +++ b/files/ja/web/css/object-position/index.md @@ -3,66 +3,80 @@ title: object-position slug: Web/CSS/object-position tags: - CSS - - CSS Image - - CSS Property + - CSS 画像 + - CSS プロパティ + - レイアウト + - 位置 - Reference + - 置換要素 + - css レイアウト + - object-position + - recipe:css-property +browser-compat: css.properties.object-position translation_of: Web/CSS/object-position --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>object-position</code></strong> プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.</p> +**`object-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックス内における[置換要素](/ja/docs/Web/CSS/Replaced_element)の中身の配置を指定します。ボックスの領域内で置換要素のオブジェクトに覆われていない部分は、要素の背景が表示されます。 -<p>You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the {{cssxref("object-fit")}} property.</p> +置換要素の本来のサイズ (すなわち、自然なサイズ) を、その要素のボックス内に合わせる方法を調整するには、{{cssxref("object-fit")}} プロパティを使用することができます。 -<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div> +{{EmbedInteractiveExample("pages/css/object-position.html")}} +## 構文 - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css">/* <position> 値 */ +```css +/* <position> 値 */ object-position: center top; object-position: 100px 50px; /* グローバル値 */ object-position: inherit; object-position: initial; +object-position: revert; object-position: unset; -</pre> +``` + +### 値 + +- {{cssxref("<position>")}} + - : 要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値です。相対値または絶対値のオフセットを指定できます。 -<h3 id="Values" name="Values">値</h3> +> **Note:** 置換要素がボックス外にはみ出る位置も指定できます。 -<dl> - <dt><code><position></code></dt> - <dd>要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値による {{cssxref("<position>")}} です。相対値または絶対値のオフセットを指定できます。また、要素のボックスの外側の位置も指定できます。</dd> -</dl> +## Formal definition -<div class="blockIndicator note"> -<p><strong>注:</strong> 要素がボックス外にはみ出る位置も指定できます。</p> -</div> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## Formal syntax {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## Examples -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> +<h3 id="Positioning_image_content">画像の内容の配置を設定</h3> -<pre class="brush: html"><img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> -<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/> -</pre> +#### HTML -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> +それぞれ MDN のロゴを表示する 2 つの {{HTMLElement("img")}} 要素があります。 -<pre class="brush: css">img { - width: 150px; - height: 100px; - border: 1px solid #000; - background-color: yellow; +```html +<img id="object-position-1" src="mdn.svg" alt="MDN Logo"/> +<img id="object-position-2" src="mdn.svg" alt="MDN Logo"/> +``` + +#### CSS + +この CSS には、`<img>` 要素自体の既定のスタイルと、2 つの画像それぞれに個別のスタイルが含まれています。 + +```css +img { + width: 300px; + height: 250px; + border: 1px solid black; + background-color: silver; margin-right: 1em; + object-fit: none; } #object-position-1 { @@ -70,50 +84,24 @@ object-position: unset; } #object-position-2 { - object-position: 20% 10%; + object-position: 100% 10%; } -</pre> - -<p>The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.</p> - -<h3 id="Output" name="Output">出力</h3> +``` -<p>{{EmbedLiveSample('Example', '100%','300px' )}}</p> +1 枚目の画像は、その左端が要素のボックスの左端から 10 ピクセルはみ出して配置されています。2 番目の画像は、その右端が要素のボックスの右端と同じ位置にあり、要素のボックスの高さの 10% の位置にあります。 -<h2 id="Specifications" name="Specifications">仕様</h2> +#### Result -<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 Images', '#the-object-position', 'object-position')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>最初期の定義</td> - </tr> - </tbody> -</table> +{{ EmbedLiveSample('Positioning_image_content', '100%','600px') }} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> +## Specifications -<div> +{{Specifications}} +## Browser compatibility -<p>{{Compat("css.properties.object-position")}}</p> -</div> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## See also -<ul> - <li>ほかの画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> -</ul> +- その他の画像関連 CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}} diff --git a/files/ja/web/css/object-position/mdn.svg b/files/ja/web/css/object-position/mdn.svg new file mode 100644 index 0000000000..bbdbacc6fc --- /dev/null +++ b/files/ja/web/css/object-position/mdn.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" height="200" width="226.855"><defs><linearGradient gradientTransform="translate(-353.18 -4908.622) scale(6.99647)" gradientUnits="userSpaceOnUse" id="a" y2="701.6" x2="66.7" y1="730.2" x1="66.7"><stop offset="0" style="stop-color:#2075bc;stop-opacity:1"/><stop offset="1" style="stop-color:#29aae1;stop-opacity:1"/></linearGradient><linearGradient gradientTransform="translate(-353.18 -4908.622) scale(6.99647)" gradientUnits="userSpaceOnUse" id="b" y2="701.6" x2="54.6" y1="730.2" x1="54.6"><stop offset="0" style="stop-color:#0a6aa8;stop-opacity:1"/><stop offset="1" style="stop-color:#1699c8;stop-opacity:1"/></linearGradient><linearGradient gradientTransform="translate(-353.18 -4908.622) scale(6.99647)" gradientUnits="userSpaceOnUse" id="c" y2="701.6" x2="70.7" y1="730.2" x1="70.7"><stop offset="0" style="stop-color:#0a6aa8;stop-opacity:1"/><stop offset="1" style="stop-color:#1699c8;stop-opacity:1"/></linearGradient></defs><path style="fill:url(#a)" d="m56.89 0-.353.354L0 22.969V200l56.537-21.555L113.427 200l56.538-21.555L226.855 200V22.969L169.965.354 169.61 0v.354l-56.183 22.261L56.89.354V0zm43.026 42.215c.968.017 1.938.077 2.91.187 7.067 1.767 13.783 4.595 20.85 6.008 6.36-1.767 14.487-3.533 20.494.707 3.887 3.887 7.773 8.48 6.006 14.487 10.954 12.014 34.983 13.427 41.697 22.615 1.06 1.413.353 11.66 2.473 17.668l.707 2.828c-2.12 4.24-7.068 15.9-5.301 13.426-1.767 2.473-3.534 3.18-8.48 2.12-4.24 2.828-6.714 4.24-11.307 6.714-4.947 1.06-15.9-2.474-20.848-3.534-9.187-1.766-9.894.354-18.021 4.594-12.014 6.007-9.541 20.85-14.135 29.33 0 1.06.354 1.766.707 2.826s.707 1.766.707 2.473c-13.78 1.767-27.209-.352-39.576-6.36-9.54-4.593-17.667-11.661-24.381-20.142 1.413-.707 3.178-1.766 4.592-2.473 1.06-.353 2.121-1.06 2.828-1.414H60.07c-3.18-.706-1.413-.353-3.886-.353 2.826-3.18 6.715-6.006 7.068-6.36l.352-.353c-3.534 1.06-8.834 2.474-11.66 5.3 1.06-4.946 4.594-8.128 6.36-12.015-4.24 2.12-8.481 4.949-12.015 8.13 0-3.888 4.595-7.776 6.715-10.956 1.413-2.12 3.534-3.886 4.594-6.36-4.24 1.414-14.135 6.713-18.022 9.186 1.767-6.007 9.895-15.193 14.488-19.787-4.593.353-14.134 6.007-18.021 8.127 0-.353.353-.707 0-1.06 3.18-4.948 12.72-12.721 17.314-16.608-5.3.707-15.9 6.36-20.847 8.127 4.24-7.774 18.374-17.313 25.088-22.967l-16.254 4.24c-2.474 0-4.595 1.766-6.715 1.413 8.48-8.481 25.796-23.322 37.103-30.39 0 0 13.665-9.626 28.184-9.374z"/><path style="fill:url(#b)" d="M56.89 0 0 22.969V200l56.89-21.555v-37.304a85.988 85.988 0 0 1-2.472-2.979 68.24 68.24 0 0 0 2.473-1.33v-2.936c-.21.011-.344.026-.707.026.226-.255.469-.503.707-.752v-3.707c-1.89.797-3.674 1.773-4.948 3.047.823-3.838 3.128-6.615 4.948-9.48v-1.8c-3.761 2.02-7.461 4.566-10.602 7.393 0-3.887 4.595-7.775 6.715-10.955 1.148-1.722 2.753-3.216 3.887-5.04v-1.05c-4.53 1.687-13.615 6.562-17.315 8.916 1.767-6.007 9.895-15.193 14.488-19.787-4.593.353-14.134 6.007-18.021 8.127 0-.353.353-.707 0-1.06 3.18-4.948 12.72-12.721 17.314-16.608-5.3.707-15.9 6.36-20.847 8.127 4.108-7.531 17.444-16.688 24.38-22.395v-.388l-15.546 4.056c-2.474 0-4.595 1.766-6.715 1.413 5.224-5.225 13.802-12.857 22.262-19.604V0z"/><path style="fill:url(#c)" d="m169.965 0-56.537 22.969v22.627c3.386 1.083 6.775 2.12 10.248 2.814 6.36-1.767 14.487-3.533 20.494.707 3.887 3.887 7.773 8.48 6.006 14.487 4.891 5.364 12.39 8.613 19.789 11.386V0zm-26.397 124.818c-4.455.05-6.377 2.037-12.472 5.217-12.014 6.007-9.541 20.85-14.135 29.33 0 1.06.354 1.766.707 2.826s.707 1.766.707 2.473a74.51 74.51 0 0 1-4.947.465V200l56.537-21.555v-49.47c-4.947 1.06-15.9-2.474-20.848-3.534-2.297-.441-4.063-.64-5.549-.623z"/></svg>
\ No newline at end of file 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() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`url()`** は [CSS](/ja/docs/Web/CSS) 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです **`url()`** 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。`url()` 関数表記は `<url>` データ型の値になります。 -<div class="notecard note"> -<p><strong>URI か URL か？</strong> {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの<em>場所</em>を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。</p> +> **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 の `<uri>` データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 `url()` は真に `<url>` のみを記述します。 -<p>CSS Level 1 では、 <code>url()</code> 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 <code>url()</code> の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは <code>url()</code> を CSS の <code><uri></code> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 <code>url()</code> は真に <code><url></code> のみを記述します。</p> -</div> - -<pre class="brush: css no-line-numbers">/* 単純な使い方 */ +```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); -</pre> +``` + +相対 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 + +- `<string>` -<p>相対 URL が使用された場合は、 (ウェブページの URL からではなく) スタイルシートの URL からの相対となります。</p> + - : URL まだは SVG 図形の ID を指定することができる文字列です。 -<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> + - \<url> -<h2 id="Syntax">構文</h2> + - : 含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。 -<h3 id="Values">値</h3> + ```css + <css_property>: url("https://example.com/image.png") + <css_property>: url('https://example.com/image.png') + <css_property>: url(https://example.com/image.png) + ``` -<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> + URL を引用符なしで書く場合は、バックスラッシュを (`\`) を URL に含まれる括弧、ホワイトスペース文字、単一引用符 (`'`)、二重引用符 (`"`) の前に使用してください。 - <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><url-modifier></code> {{Experimental_Inline}}</dt> - <dd>将来的に <code>url()</code> 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法を指定することに対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。</dd> -</dl> + - パス + - : [SVG 図形](/ja/docs/Web/SVG/Tutorial/Basic_Shapes)の ID への参照 -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` -- パスとして図形の形状を使用します。 -<h3 id="Formal_syntax">形式文法</h3> +- `<url-modifier>` {{Experimental_Inline}} + - : 将来的に `url()` 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法の指定に対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。 -<pre class="brush: css">url( <a href="/ja/docs/Web/CSS/string"><string></a> <url-modifier>* )</pre> +## 形式文法 + +```css +url( <string> <url-modifier>* ) +``` <h2 id="Examples">例</h2> <h3 id="A_url_used_in_the_background_property">background プロパティで使用される URL</h3> -<pre>.topbanner { - background: url("topbanner.png") #00D no-repeat fixed; -} -</pre> + .topbanner { + background: url("topbanner.png") #00D no-repeat fixed; + } <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> + ul { + list-style: square url(http://www.example.com/redball.png); + } <h3 id="Usage_in_the_content_property">content プロパティの使用</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><ul> - <li>Item 1</li> - <li>Item 2</li> - <li>Item 3</li> -</ul></pre> +```html +<ul> + <li>Item 1</li> + <li>Item 2</li> + <li>Item 3</li> +</ul> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css highlight[2]">li::after { - content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); -}</pre> +```css +li::after { + content: ' - ' url(star.gif); +} +``` -<h4 id="Result">結果</h4> +#### Result -<p>{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}}</p> +{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}} <h3 id="Using_a_data-uri">data-uri の使用</h3> -<div id="color-value"> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><div class="background"></div></pre> +```html +<div class="background"></div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<div class="hidden"> -<pre class="brush: css">.background { +```css hidden +.background { height: 100vh; -}</pre> -</div> +} +``` -<pre class="brush: css highlight[6]">.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"); -}</pre> -</div> +} +``` -<p>{{EmbedLiveSample("Using_a_data-uri", "100%", 50)}}</p> +{{EmbedLiveSample("Using_a_data-uri", "100%", 50)}} <h3 id="Usage_in_filters">フィルターでの使用</h3> -<p>URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。</p> +URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。 -<ol> - <li>SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。</li> - <li>SVG がページ内にある場合は、フィルターの ID。</li> -</ol> +1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。 +2. SVG がページ内にある場合は、フィルターの ID。 -<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">仕様書</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">ブラウザーの互換性</h2> - -<div>{{Compat}}</div> - -<h2 id="See_also">関連情報</h2> + .blur { + filter: url(my-file.svg#svg-blur); /* フィルターとして使用する SVG ファイルの URL */ + } -<ul> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("image()")}}</li> - <li>{{cssxref("image-set()")}}</li> - <li>{{cssxref("cross-fade()")}}</li> -</ul> + .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 Binary files differnew file mode 100644 index 0000000000..09dff1d9c0 --- /dev/null +++ b/files/ja/web/css/url()/star.gif |
/br.png?h=dependabot/github_actions/actions/cache-2.1.7&id=c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba){kind=link}
/tr.png?h=dependabot/github_actions/actions/cache-2.1.7&id=c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba){kind=link}
/star.gif?h=dependabot/github_actions/actions/cache-2.1.7&id=c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba){kind=link}