diff options
Diffstat (limited to 'files/ja/web/css')
| -rw-r--r-- | files/ja/web/css/background-attachment/index.md | 155 | ||||
| -rw-r--r-- | files/ja/web/css/background-clip/index.md | 150 | ||||
| -rw-r--r-- | files/ja/web/css/background-color/index.md | 170 | ||||
| -rw-r--r-- | files/ja/web/css/background-image/index.md | 206 | ||||
| -rw-r--r-- | files/ja/web/css/background-origin/index.md | 141 | ||||
| -rw-r--r-- | files/ja/web/css/background-position-x/index.md | 138 | ||||
| -rw-r--r-- | files/ja/web/css/background-position-y/index.md | 139 | ||||
| -rw-r--r-- | files/ja/web/css/background-position/catfront.png | bin | 0 -> 2840 bytes | |||
| -rw-r--r-- | files/ja/web/css/background-position/index.md | 294 | ||||
| -rw-r--r-- | files/ja/web/css/background-position/startransparent.gif | bin | 0 -> 190 bytes | |||
| -rw-r--r-- | files/ja/web/css/background-repeat/index.md | 303 | ||||
| -rw-r--r-- | files/ja/web/css/background-repeat/starsolid.gif | bin | 0 -> 272 bytes | |||
| -rw-r--r-- | files/ja/web/css/background-size/index.md | 260 | ||||
| -rw-r--r-- | files/ja/web/css/background/index.md | 245 | ||||
| -rw-r--r-- | files/ja/web/css/box-shadow/index.md | 235 |
15 files changed, 1148 insertions, 1288 deletions
diff --git a/files/ja/web/css/background-attachment/index.md b/files/ja/web/css/background-attachment/index.md index 230923fd03..a4d68539be 100644 --- a/files/ja/web/css/background-attachment/index.md +++ b/files/ja/web/css/background-attachment/index.md @@ -3,23 +3,23 @@ title: background-attachment slug: Web/CSS/background-attachment tags: - CSS - - CSS Background - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 背景 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.background-attachment translation_of: Web/CSS/background-attachment --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>background-attachment</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、背景画像の位置を{{glossary("Viewport", "ビューポート")}}の中で固定するか、包含ブロックと一緒にスクロールするかを設定します。</p> +**`background-attachment`** は [CSS](/ja/docs/Web/CSS) のプロパティで、背景画像の位置を{{glossary("Viewport", "ビューポート")}}の中で固定するか、包含ブロックと一緒にスクロールするかを設定します。 -<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-attachment.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; @@ -27,62 +27,65 @@ background-attachment: local; /* グローバル値 */ background-attachment: inherit; background-attachment: initial; +background-attachment: revert; background-attachment: unset; -</pre> +``` -<p><code>background-attachment</code> プロパティは、以下に挙げた値のうちの一つで指定します。</p> +`background-attachment` プロパティは、以下に挙げた値のうちの一つで指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>fixed</code></dt> - <dd>背景はビューポートに対する相対位置で固定されます。要素がスクロール機構を持っていたとしても、背景画像は要素とともには動きません。 (これは {{cssxref("background-clip", "background-clip: text", "#text")}} とは両立できません)</dd> - <dt><code>local</code></dt> - <dd>背景は要素の内容に対する相対位置で固定されます。要素がスクロール機構を持っていた場合、背景画像は要素の内容とともにスクロールします。背景画像の描画エリアと配置エリアは、それらを囲む境界ではなく、要素のスクロール可能なエリアを基準にします。</dd> - <dt><code>scroll</code></dt> - <dd>背景は要素自身に対する相対位置で固定され、内容と共にスクロールしません。 (要素の境界に対して効果的に張り付きます。)</dd> -</dl> +- `fixed` + - : 背景はビューポートに対する相対位置で固定されます。要素がスクロール機構を持っていたとしても、背景画像は要素とともには動きません。 (これは {{cssxref("background-clip", "background-clip: text", "#values")}} とは両立できません) +- `local` + - : 背景は要素の内容に対する相対位置で固定されます。要素がスクロール機構を持っていた場合、背景画像は要素の内容とともにスクロールします。背景画像の描画エリアと配置エリアは、それらを囲む境界ではなく、要素のスクロール可能なエリアを基準にします。 +- `scroll` + - : 背景は要素自身に対する相対位置で固定され、内容と共にスクロールしません。 (要素の境界に対して効果的に張り付きます。) -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Simple_example" name="Simple_example">単純な例</h3> +<h3 id="Simple_example">単純な例</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p> +```html +<p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. -</p></pre> +</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush:css; highlight:[3]; notranslate">p { - background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); +```css +p { + background-image: url("starsolid.gif"); background-attachment: fixed; } -</pre> +``` <h4 id="Result" name="Result">結果</h4> -<p>{{EmbedLiveSample("Simple_example")}}</p> +{{EmbedLiveSample("Simple_example")}} -<h3 id="Multiple_background_images" name="Multiple_background_images">複数の背景画像</h3> +<h3 id="Multiple_background_images">複数の背景画像</h3> -<p>このプロパティは複数の背景画像に対応しており、それぞれの背景画像に異なる <code><attachment></code> をカンマ区切りで指定できます。それぞれの画像には先頭から順番に <code><attachment></code> の値が適用されます。</p> +このプロパティは複数の背景画像に対応しており、それぞれの背景画像に異なる `<attachment>` をカンマ区切りで指定できます。それぞれの画像には先頭から順番に `<attachment>` の値が適用されます。 -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p> +```html +<p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to @@ -96,56 +99,32 @@ background-attachment: unset; time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted! -</p></pre> +</p> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush:css; highlight:[3]; notranslate">p { - background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), - url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); +```css +p { + background-image: url("starsolid.gif"), + url("startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; -}</pre> - -<h4 id="Result_2" name="Result_2">結果</h4> - -<p>{{EmbedLiveSample("Multiple_background_images")}}</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('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>複数の背景画像と <code>local</code> に対応するために一括指定プロパティを拡張。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>重要な変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>重要な変更なし。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.background-attachment")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">複数の背景画像を使う</a></li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Multiple_background_images")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [複数の背景画像を使う](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/ja/web/css/background-clip/index.md b/files/ja/web/css/background-clip/index.md index 6c318174a8..23cd03facc 100644 --- a/files/ja/web/css/background-clip/index.md +++ b/files/ja/web/css/background-clip/index.md @@ -3,33 +3,29 @@ title: background-clip slug: Web/CSS/background-clip tags: - CSS - - CSS Background - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 背景 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.background-clip translation_of: Web/CSS/background-clip --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong><code>background-clip</code></strong> は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。</p> +**`background-clip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。 -<div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-clip.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +要素に {{cssxref("background-image")}} または {{cssxref("background-color")}} がない場合、このプロパティは ({{cssxref("border-style")}} または {{cssxref("border-image")}} によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。 -<p>要素に {{cssxref("background-image")}} または {{cssxref("background-color")}} がない場合、このプロパティは ({{cssxref("border-style")}} または {{cssxref("border-image")}} によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。</p> +> **Note:** [ルート要素](/ja/docs/Web/HTML/Element/html)は異なる背景の描画領域を持っているため、その要素に `background-clip` プロパティが指定されても効果はありません。「[特殊要素の背景](https://drafts.csswg.org/css-backgrounds-3/#special-backgrounds)」を参照してください。 -<div class="blockIndicator note"> -<p><strong>注:</strong> <a href="/ja/docs/Web/HTML/Element/html">ルート要素</a>は異なる背景の描画領域を持っているため、その要素に <code>background-clip</code> プロパティが指定されても効果はありません。「<a href="https://drafts.csswg.org/css-backgrounds-3/#special-backgrounds">特殊要素の背景</a>」を参照してください。</p> -</div> +> **Note:** [ルート要素](/ja/docs/Web/HTML/Element/html)が HTML 要素である文書の場合、ルート要素上の {{cssxref("background-image")}} の計算値が `none` であり、その {{cssxref("background-color")}} が `transparent` であると、ユーザーエージェントは代わりに、 `background` プロパティの計算値をその要素の HTML の {{HTMLElement("body")}} の子要素から伝搬させなければなりません。その `<body>` 要素の `background` プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 `<body>` 要素にキャンバスの背景を指定することを推奨します。 -<div class="blockIndicator note"> -<p><strong>注:</strong> <a href="/ja/docs/Web/HTML/Element/html">ルート要素</a>が HTML 要素である文書の場合、ルート要素上の {{cssxref("background-image")}} の計算値が <code>none</code> であり、その {{cssxref("background-color")}} が <code>transparent</code> であると、ユーザーエージェントは代わりに、 {{cssxref("background")}} プロパティの計算値をその要素の HTML の {{HTMLElement("body")}} の子要素から伝搬させなければなりません。その <code><body></code> 要素の <code>background</code> プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 <code><body></code> 要素にキャンバスの背景を指定することを推奨します。</p> -</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; @@ -38,43 +34,52 @@ background-clip: text; /* グローバル値 */ background-clip: inherit; background-clip: initial; +background-clip: revert; background-clip: unset; -</pre> +``` + +### 値 + +- `border-box` + - : 背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。 +- `padding-box` + - : 背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。 +- `content-box` + - : 背景をコンテンツボックスの中に (切り取って) 表示します。 +- `text` + - : 背景を前景のテキストの中に (切り取って) 表示します。 + +## アクセシビリティの考慮 -<h3 id="Values" name="Values">値</h3> +`background-clip: text` を使用する際には、背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページの内容を読むことができる程度に高いことを確認してください。 -<dl> - <dt><code>border-box</code></dt> - <dd>背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。</dd> - <dt><code>padding-box</code></dt> - <dd>背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。</dd> - <dt><code>content-box</code></dt> - <dd>背景をコンテンツボックスの中に (切り取って) 表示します。</dd> - <dt><code>text</code> {{experimental_inline}}</dt> - <dd>背景を前景のテキストの中に (切り取って) 表示します。</dd> -</dl> +背景画像が読み込まれないと、テキストが読めなくなることがあります。これを防ぐために、代替の {{cssxref("background-color")}} を追加し、画像なしでテストしてください。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +{{cssxref("@supports")}} で機能クエリの使用し、`background-clip: text` に対応しているかどうかをテストして、対応していない場合はアクセス可能な代替手段を提供することを検討してください。 -<p>{{cssinfo}}</p> +## 公式定義 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h4 id="HTML">HTML</h4> +### HTML -<pre class="brush: html notranslate"><p class="border-box">背景が境界の裏まで拡張されます。</p> -<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p> -<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p> -<p class="text">背景が前景のテキストで切り取られます。</p> -</pre> +```html +<p class="border-box">背景が境界の裏まで拡張されます。</p> +<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p> +<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p> +<p class="text">背景が前景のテキストで切り取られます。</p> +``` -<h4 id="CSS">CSS</h4> +### CSS -<pre class="brush: css notranslate">p { +```css +p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; @@ -92,44 +97,23 @@ background-clip: unset; background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Examples', 600, 580)}}</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('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td> - <td>{{Spec2('CSS4 Backgrounds')}}</td> - <td><code>text</code> の値を追加。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.background-clip")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("clip-path")}} プロパティは<em>要素全体</em>を表示する部分を定義するクリッピング領域を作成します。</li> - <li>背景のプロパティ: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}</li> - <li><a href="/ja/docs/Web/CSS/box_model">CSS ボックスモデルの紹介</a></li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('Examples', 600, 580)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("clip-path")}} プロパティは*要素全体*を表示する部分を定義するクリッピング領域を作成します。 +- 背景のプロパティ: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}} +- [CSS ボックスモデルの紹介](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) diff --git a/files/ja/web/css/background-color/index.md b/files/ja/web/css/background-color/index.md index 5126230136..b615cbf293 100644 --- a/files/ja/web/css/background-color/index.md +++ b/files/ja/web/css/background-color/index.md @@ -3,31 +3,40 @@ title: background-color slug: Web/CSS/background-color tags: - CSS + - CSS 背景 - CSS プロパティ - - CSS 背景と境界 - グラフィック - - リファレンス + - HTML 色 + - HTML スタイル - レイアウト + - リファレンス + - スタイル + - Styling HTML + - background-color + - recipe:css-property +browser-compat: css.properties.background-color translation_of: Web/CSS/background-color --- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-color</code></strong> プロパティは、要素の背景色を設定します。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div> +[CSS](/ja/docs/Web/CSS) の **`background-color`** プロパティは、要素の背景色を設定します。 -<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{EmbedInteractiveExample("pages/css/background-color.html")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ background-color: red; background-color: indigo; -/* Hexadecimal value */ -background-color: #bbff00; /* 不透過 */ +/* 16 進の値 */ +background-color: #bbff00; /* 完全不透過 */ +background-color: #bf0; /* 完全不透過の短縮形 */ background-color: #11ffee00; /* 完全透過 */ -background-color: #11ffeeff; /* 不透過 */ +background-color: #1fe0; /* 完全透過の短縮形 */ +background-color: #11ffeeff; /* 完全不透過 */ +background-color: #1fef; /* 完全不透過の短縮形 */ /* RGB 値 */ background-color: rgb(255, 255, 128); /* 不透過 */ @@ -44,43 +53,57 @@ background-color: transparent; /* グローバル値 */ background-color: inherit; background-color: initial; -background-color: unset;</pre> +background-color: revert; +background-color: unset; +``` + +`background-color` プロパティは単一の `<color>` 値で指定します。 + +### 値 + +- {{cssxref("<color>")}} + - : 背景の単一色 (uniform color) を表します。指定されていれば {{cssxref("background-image")}} の背後に描画されますが、画像に透明な部分があれば色が見えます。 + +## アクセシビリティの考慮事項 + +背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。 + +色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、[太字](/ja/docs/Web/CSS/font-weight)ならば 18.66px 以上、または 24px 以上と定義されています。 -<p><code>background-color</code> プロパティは単一の <code><a href="#<color>"><color></a></code> 値で指定します。</p> +- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><a id="<color>"></a>{{cssxref("<color>")}}</dt> - <dd>背景の均等色 (uniform color) を表します。指定されていれば {{cssxref("background-image")}} の背後に描画されますが、画像に透明な部分があれば色が見えます。</dd> -</dl> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div class="exampleone"> +```html +<div class="exampleone"> Lorem ipsum dolor sit amet, consectetuer -</div> +</div> -<div class="exampletwo"> +<div class="exampletwo"> Lorem ipsum dolor sit amet, consectetuer -</div> +</div> -<div class="examplethree"> +<div class="examplethree"> Lorem ipsum dolor sit amet, consectetuer -</div></pre> +</div> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css; highlight:[2,7,12];">.exampleone { - background-color: teal; - color: white; -} +```css +.exampleone { background-color: transparent; } .exampletwo { background-color: rgb(153,102,153); @@ -91,64 +114,23 @@ background-color: unset;</pre> background-color: #777799; color: #FFFFFF; } -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples", 200, 150)}}</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。</p> - -<p>色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、<a href="/ja/docs/Web/CSS/font-weight">太字</a>ならば 18.66px 以上、または 24px 以上と定義されています。</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<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('CSS3 Backgrounds', '#background-color', 'background-color')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>形式上は <code>transparent</code> キーワードが削除されたが、 {{cssxref("<color>")}} の正規の値として組み入れられたため、変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.background-color")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a></li> - <li>{{cssxref("<color>")}} データ型</li> - <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li> -</ul> +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [複数の背景](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) +- {{cssxref("<color>")}} データ型 +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- [CSS を使用した HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) diff --git a/files/ja/web/css/background-image/index.md b/files/ja/web/css/background-image/index.md index 9c2da47f92..34d242f706 100644 --- a/files/ja/web/css/background-image/index.md +++ b/files/ja/web/css/background-image/index.md @@ -2,92 +2,93 @@ title: background-image slug: Web/CSS/background-image tags: - - Background - CSS - - CSS Background - - CSS Property + - CSS 背景 - CSS プロパティ - - CSS 背景と境界 - - Reference - - background-image - - 'recipe:css-property' - リファレンス + - recipe:css-property +browser-compat: css.properties.background-image translation_of: Web/CSS/background-image --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong><code>background-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素に1つ以上の背景画像を設定します。</p> +**`background-image`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素に 1 つ以上の背景画像を設定します。 -<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-image.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。 -<p>画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。</p> +要素の[境界](/ja/docs/Web/CSS/border)は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。 -<p>要素の<a href="/ja/docs/Web/CSS/border">境界</a>は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。</p> +指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を `none` 値であるかのように処理します。 -<p>指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を <code>none</code> 値であるかのように処理します。</p> +> **Note:** たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。 -<div class="note"><strong>注:</strong> たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +それぞれの背景画像は、キーワード `none` または {{cssxref("<image>")}} 値として指定されます。 -<p>それぞれの背景画像は、キーワード <code><a href="#none">none</a></code> または {{cssxref("<image>")}} 値として指定されます。</p> +複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。 -<p>複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。</p> - -<pre class="brush: css no-line-numbers notranslate">background-image: +```css +background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), - url('https://mdn.mozillademos.org/files/7693/catfront.png');</pre> + url('catfront.png'); + +/* グローバル値 */ +background-image: inherit; +background-image: initial; +background-image: revert; +background-image: unset; +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt id="none"><code>none</code></dt> - <dd>画像を用いないことを表すキーワード。</dd> - <dt id="image"><code><image></code></dt> - <dd>表示する背景を指し示す {{cssxref("<image>")}}。<a href="/ja/docs/Web/Guide/CSS/Using_multiple_backgrounds">複数の背景</a>に対応している場合は、カンマ区切りで複数指定することができます。</dd> -</dl> +- `none` + - : 画像を用いないことを表すキーワード。 +- `<image>` + - : 表示する背景を記述する {{cssxref("<image>")}}。[複数の背景](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)に対応している場合は、カンマ区切りで複数指定することができます。 -<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 href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">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_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Layering_background_images" name="Layering_background_images">背景画像の重ね合わせ</h3> +<h3 id="Layering_background_images">背景画像の重ね合わせ</h3> -<p>星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。</p> +星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div> - <p class="catsandstars"> - This paragraph is full of cats<br />and stars. - </p> - <p>This paragraph is not.</p> - <p class="catsandstars"> - Here are more cats for you.<br />Look at them! - </p> - <p>And no more.</p> -</div></pre> +```html +<div> + <p class="catsandstars"> + This paragraph is full of cats<br />and stars. + </p> + <p>This paragraph is not.</p> + <p class="catsandstars"> + Here are more cats for you.<br />Look at them! + </p> + <p>And no more.</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">p { +```css +p { font-size: 1.5em; color: #FE7F88; background-image: none; @@ -96,72 +97,45 @@ translation_of: Web/CSS/background-image div { background-image: - url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); + url("mdn_logo_only_color.png"); } .catsandstars { background-image: - url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), - url("https://mdn.mozillademos.org/files/7693/catfront.png"); + url("startransparent.gif"), + url("catfront.png"); background-color: transparent; } -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Layering_background_images')}}</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('CSS3 Backgrounds', '#background-image', 'background-image')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>CSS2 Revision 1 と比べ、プロパティが複数の背景と任意の {{cssxref("<image>")}} CSS データ型をサポートするよう拡張されました。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>CSS1 と比べ、画像が固有の寸法を持たない場合、持つ場合の取り扱い方が明記されました。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat("css.properties.background-image")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/Guide/CSS/CSS_Image_Sprites">CSS イメージスプライト</a></li> - <li>{{HTMLElement("img")}}</li> - <li>画像に関するデータ型: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}</li> - <li>画像に関する関数: - <ul> - <li>{{cssxref("cross-fade")}}</li> - <li>{{cssxref("element")}}</li> - <li>{{cssxref("imagefunction", "image()")}}</li> - <li>{{cssxref("image-set")}}</li> - <li>{{cssxref("linear-gradient")}}</li> - <li>{{cssxref("radial-gradient")}}</li> - <li>{{cssxref("repeating-linear-gradient")}}</li> - <li>{{cssxref("repeating-radial-gradient")}}</li> - <li>{{cssxref("paint")}}</li> - <li>{{cssxref("url", "url()")}}</li> - </ul> - </li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample('Layering_background_images')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS での画像スプライトの実装](/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS) +- {{HTMLElement("img")}} +- 画像に関するデータ型: {{cssxref("<image>")}}, {{cssxref("<gradient>")}} +- 画像に関する関数: + + - {{cssxref("cross-fade()")}} + - {{cssxref("element()")}} + - {{cssxref("image/image()", "image()")}} + - {{cssxref("image/image-set()", "image-set()")}} + - {{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()")}} + - {{cssxref("image/paint()", "paint()")}} + - {{cssxref("url()", "url()")}} diff --git a/files/ja/web/css/background-origin/index.md b/files/ja/web/css/background-origin/index.md index 34ec2d7dee..74b19a3de6 100644 --- a/files/ja/web/css/background-origin/index.md +++ b/files/ja/web/css/background-origin/index.md @@ -2,29 +2,26 @@ title: background-origin slug: Web/CSS/background-origin tags: - - Background - CSS + - CSS 背景 - CSS プロパティ - - CSS 背景と境界 - - Reference - - background-origin + - リファレンス + - recipe:css-property +browser-compat: css.properties.background-origin translation_of: Web/CSS/background-origin --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-origin</code></strong> プロパティは、<em>背景配置領域</em>を設定します。言い換えれば、 {{cssxref("background-image")}} プロパティで指定された画像の原点の位置を設定します。</p> +[CSS](/ja/docs/Web/CSS) の **`background-origin`** プロパティは、背景配置領域を境界の開始位置、境界の内部、パディングの内部から設定します。 -<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-origin.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{cssxref("background-attachment")}} が `fixed` のときは `background-origin` が無視されることに注意してください。 -<p>{{cssxref("background-attachment")}} が <code>fixed</code> のときは <code>background-origin</code> が無視されることに注意してください。</p> +## 構文 -<div class="note"><strong>メモ:</strong> {{cssxref("background")}} 一括指定プロパティは、該当する値を設定しなかった場合、このプロパティの値を初期値にリセットします。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; @@ -32,79 +29,93 @@ background-origin: content-box; /* グローバル値 */ background-origin: inherit; background-origin: initial; +background-origin: revert; background-origin: unset; -</pre> +``` + +`background-origin` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。 + +### 値 -<p><code>background-origin</code> プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。</p> +- `border-box` + - : 背景は境界ボックスからの相対位置になります。 +- `padding-box` + - : 背景はパディングボックスからの相対位置になります。 +- `content-box` + - : 背景はコンテンツボックスからの相対位置になります。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><code>border-box</code></dt> - <dd>背景は境界ボックスからの相対位置になります。</dd> - <dt><code>padding-box</code></dt> - <dd>背景はパディングボックスからの相対位置になります。</dd> - <dt><code>content-box</code></dt> - <dd>背景はコンテンツボックスからの相対位置になります。</dd> -</dl> +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<pre class="brush:css; highlight:[6];">.example { +### 背景画像の原点を設定 + +```css +.example { border: 10px double; padding: 10px; background: url('image.jpg'); background-position: center left; background-origin: content-box; } -</pre> +``` -<pre class="brush:css; highlight:[6];">#example2 { +```css +#example2 { border: 4px solid black; padding: 10px; background: url('image.gif'); background-repeat: no-repeat; background-origin: border-box; } -</pre> +``` -<pre class="brush:css; highlight:[4];">div { - background-image: url('logo.jpg'), url('mainback.png'); /* 背景に二つの画像を適用 */ +```css +div { + background-image: url('logo.jpg'), url('mainback.png'); /* 背景に 2 つの画像を適用 */ background-position: top right, 0px 0px; background-origin: content-box, padding-box; -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.background-origin")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("background-clip")}}</li> -</ul> +} +``` + +<h3 id="Using_two_gradients">2 つのグラデーションの使用</h3> + +この例では、ボックスに太い点線の境界線が付いています。最初のグラデーションでは、 `padding-box` を `background-origin` として使用しているため、背景は境界線の内側に表示されます。2 つ目のグラデーションは、`content-box`を使用しているため、コンテンツの後ろにのみ表示されます。 + +```css +.box { + margin: 10px 0; + color: #fff; + background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,0.6) 60%, rgba(252,176,69,1) 100%), + radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 28%); + border: 20px dashed black; + padding: 20px; + width: 400px; + background-origin: padding-box, content-box; + background-repeat: no-repeat; +} +``` + +```html +<div class="box">Hello!</div> +``` + +{{EmbedLiveSample('Using_two_gradients', 420, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("background-clip")}} diff --git a/files/ja/web/css/background-position-x/index.md b/files/ja/web/css/background-position-x/index.md index b277e8f79f..4fcc1b79f9 100644 --- a/files/ja/web/css/background-position-x/index.md +++ b/files/ja/web/css/background-position-x/index.md @@ -3,33 +3,35 @@ title: background-position-x slug: Web/CSS/background-position-x tags: - CSS + - CSS 背景 - CSS プロパティ - - CSS 背景と境界 - Experimental - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.background-position-x translation_of: Web/CSS/background-position-x --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-position-x</code></strong> プロパティは、各背景画像における水平の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。</p> +**`background-position-x`** は [CSS](/ja/docs/Web/CSS) のプロパティで、各背景画像における水平の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。 -<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-position-x.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> -<p>このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。</p> +このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ background-position-x: left; background-position-x: center; background-position-x: right; -/* <percentage> 値 */ +/* <percentage> 値 */ background-position-x: 25%; -/* <length> 値 */ +/* <length> 値 */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; @@ -44,61 +46,75 @@ background-position-x: 0px, center; /* グローバル値 */ background-position-x: inherit; background-position-x: initial; +background-position-x: revert; background-position-x: unset; -</pre> +``` -<p><code>background-position-x</code> プロパティは、1つ以上の値をカンマで区切って指定します。</p> +`background-position-x` プロパティは、1 つ以上の値をカンマで区切って指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>left</code></dt> - <dd>背景画像の左端を、背景位置レイヤーの左端に配置します。</dd> - <dt><code>center</code></dt> - <dd>背景画像を背景位置レイヤーの方向の中央に配置します。</dd> - <dt><code>right</code></dt> - <dd>背景画像の右端を、背景位置レイヤーの右端に配置します。</dd> - <dt>{{cssxref("<length>")}}</dt> - <dt>指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。</dt> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の<em>右端</em>が、コンテナーの<em>右端</em>の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。</dd> -</dl> +- `left` + - : 背景画像の左端を、背景位置レイヤーの左端に配置します。 +- `center` + - : 背景画像を背景位置レイヤーの方向の中央に配置します。 +- `right` + - : 背景画像の右端を、背景位置レイヤーの右端に配置します。 +- {{cssxref("<length>")}} + - : 指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。 +- {{cssxref("<percentage>")}} + - : 指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の*右端*が、コンテナーの*右端*の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<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 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td> - <td>{{Spec2('CSS4 Backgrounds')}}</td> - <td>長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.background-position-x")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-position-y")}}</li> - <li>{{cssxref("background-position-inline")}}</li> - <li>{{cssxref("background-position-block")}}</li> - <li><a href="/ja/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景の使用</a></li> -</ul> +## 例 + +<h3 id="Basic_example">基本的な例</h3> + +次の例は、シンプルな背景画像の実装で、background-position-x と background-position-y を使って、画像の水平方向と垂直方向の位置を別々に定義しています。 + +#### HTML + +```html +<div></div> +``` + +#### CSS + +```css +div { + width: 300px; + height: 300px; + background-color: skyblue; + background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom 10px; +} +``` + +#### 結果 + +{{EmbedLiveSample('Basic_example', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("background-position")}} +- {{cssxref("background-position-y")}} +- {{cssxref("background-position-inline")}} +- {{cssxref("background-position-block")}} +- [複数の背景の使用](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/ja/web/css/background-position-y/index.md b/files/ja/web/css/background-position-y/index.md index 440effe3b7..776c479cb4 100644 --- a/files/ja/web/css/background-position-y/index.md +++ b/files/ja/web/css/background-position-y/index.md @@ -3,34 +3,35 @@ title: background-position-y slug: Web/CSS/background-position-y tags: - CSS - - CSS Property + - CSS 背景 - CSS プロパティ - - CSS 背景と境界 - Experimental - - Reference + - リファレンス + - recipe:css-property +browser-compat: css.properties.background-position-y translation_of: Web/CSS/background-position-y --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>background-position-y</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、各背景画像における垂直の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。</p> +**`background-position-y`** は [CSS](/ja/docs/Web/CSS) のプロパティで、各背景画像における垂直の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。 -<div>{{EmbedInteractiveExample("pages/css/background-position-y.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-position-y.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> -<p>このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。</p> +このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ background-position-y: top; background-position-y: center; background-position-y: bottom; -/* <percentage> 値 */ +/* <percentage> 値 */ background-position-y: 25%; -/* <length> 値 */ +/* <length> 値 */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; @@ -45,61 +46,75 @@ background-position-y: 0px, center; /* グローバル値 */ background-position-y: inherit; background-position-y: initial; +background-position-y: revert; background-position-y: unset; -</pre> +``` -<p><code>background-position-y</code> プロパティは、1つ以上の値をコンマで区切って指定します。</p> +`background-position-y` プロパティは、 1 つ以上の値をカンマで区切って指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>top</code></dt> - <dd>背景画像の上端を、背景位置レイヤーの上端に合わせます。</dd> - <dt><code>center</code></dt> - <dd>背景画像を垂直方向の中央を、背景位置レイヤーの垂直方向の中央に合わせます。</dd> - <dt><code>bottom</code></dt> - <dd>背景画像の下端を、背景位置レイヤーの下端に合わせます。</dd> - <dt>{{cssxref("<length>")}}</dt> - <dd>指定された背景画像の垂直方向の辺の、対応する背景位置レイヤーの上側の垂直方向の辺を基準としたオフセットです。 (一部のブラウザーではオフセットの下辺に割り当てることができます。)</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>指定された背景画像のコンテナーに対する垂直方向の相対位置のオフセットです。0%の値は背景画像の上辺がコンテナーの上辺に配置されることを意味し、100%の値は背景画像の下辺がコンテナーの下辺に配置されることを意味しますので、50%の値は背景画像を垂直方向に中央揃えします。</dd> -</dl> +- `top` + - : 背景画像の上端を、背景位置レイヤーの上端に合わせます。 +- `center` + - : 背景画像を垂直方向の中央を、背景位置レイヤーの垂直方向の中央に合わせます。 +- `bottom` + - : 背景画像の下端を、背景位置レイヤーの下端に合わせます。 +- {{cssxref("<length>")}} + - : 指定された背景画像の垂直方向の辺の、対応する背景位置レイヤーの上側の垂直方向の辺を基準としたオフセットです。 (一部のブラウザーではオフセットの下辺に割り当てることができます。) +- {{cssxref("<percentage>")}} + - : 指定された背景画像のコンテナーに対する垂直方向の相対位置のオフセットです。0%の値は背景画像の上辺がコンテナーの上辺に配置されることを意味し、100% の値は背景画像の下辺がコンテナーの下辺に配置されることを意味しますので、50% の値は背景画像を垂直方向に中央揃えします。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<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 Backgrounds', '#background-position-longhands', 'background-position-y')}}</td> - <td>{{Spec2('CSS4 Backgrounds')}}</td> - <td>長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.background-position-y")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-position-x")}}</li> - <li>{{cssxref("background-position-inline")}}</li> - <li>{{cssxref("background-position-block")}}</li> - <li><a href="/ja/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景の使用</a></li> -</ul> +## 例 + +<h3 id="Basic_example">基本的な例</h3> + +次の例は、シンプルな背景画像の実装で、background-position-x と background-position-y を使って、画像の水平方向と垂直方向の位置を別々に定義しています。 + +#### HTML + +```html +<div></div> +``` + +#### CSS + +```css +div { + width: 300px; + height: 300px; + background-color: skyblue; + background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom 10px; +} +``` + +#### 結果 + +{{EmbedLiveSample('Basic_example', '100%', 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("background-position")}} +- {{cssxref("background-position-x")}} +- {{cssxref("background-position-inline")}} +- {{cssxref("background-position-block")}} +- [複数の背景の使用](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/ja/web/css/background-position/catfront.png b/files/ja/web/css/background-position/catfront.png Binary files differnew file mode 100644 index 0000000000..39807a40d1 --- /dev/null +++ b/files/ja/web/css/background-position/catfront.png diff --git a/files/ja/web/css/background-position/index.md b/files/ja/web/css/background-position/index.md index 2b43fb1e6c..210f6d32b8 100644 --- a/files/ja/web/css/background-position/index.md +++ b/files/ja/web/css/background-position/index.md @@ -3,33 +3,33 @@ title: background-position slug: Web/CSS/background-position tags: - CSS - - CSS Background - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 背景 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.background-position translation_of: Web/CSS/background-position --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>background-position</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、それぞれの背景画像の初期位置を設定します。位置は {{cssxref("background-origin")}} で設定された位置レイヤーからの相対です。</p> +**`background-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、それぞれの背景画像の初期位置を設定します。位置は {{cssxref("background-origin")}} で設定された位置レイヤーからの相対です。 -<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-position.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; -/* <percentage> 値 */ +/* <percentage> 値 */ background-position: 25% 75%; -/* <length> 値 */ +/* <length> 値 */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; @@ -46,109 +46,105 @@ background-position: top right 10px; /* グローバル値 */ background-position: inherit; background-position: initial; +background-position: revert; background-position: unset; -</pre> - -<p><code>background-position</code> プロパティは1つ以上の <code><a href="#<position>"><position></a></code> 値をカンマで区切って指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="<position>"><code><position></code></dt> - <dd>{{cssxref("<position>")}} です。位置は要素のボックスの辺を基準にして項目を配置するための X/Y 座標を定義します。1～4つの値を使用して定義できます。2つのキーワード値でない値を使用する場合は、最初の値が水平位置を表し、2番目の値が垂直位置を表します。1つの値しか指定されない場合、2番目の値は <code>center</code> とみなされます。3つまたは4つの値が使用された場合は、 length-percentage 値はその前のキーワード値に対するオフセットです。</dd> - <dd> - <p><strong>値1つの構文:</strong> 値は以下のようになります。</p> - - <ul> - <li><code>center</code> のキーワード値の場合は、画像を中央揃えにします。</li> - <li>キーワード値 <code>top</code>、 <code>left</code>、 <code>bottom</code>、 <code>right</code> のうちの一つの場合。<span id="result_box" lang="ja"><span>アイテムを配置する辺を指定します。</span><span>もう一方の寸法が50％に設定されていれば、指定された端までの間の中央に配置されます。</span></span></li> - <li>{{cssxref("<length>")}} または {{cssxref("<percentage>")}} の場合。これは左からの相対位置の X 座標を指定し、 Y 座標は50%に設定されます。</li> - </ul> - - <p><strong>値2つの構文:</strong> 1つ目の値が X を定義し、もう1つの値が Y を定義します。両方が以下の値を取ることができます。</p> - - <ul> - <li>キーワード値 <code>top</code>、 <code>left</code>、 <code>bottom</code>、 <code>right</code> のうちの一つの場合。ここで <code>left</code> または <code>right</code> が指定された場合は、これが X 座標を定義し、もう一方の値が Y 座標になります。 <code>top</code> または <code>bottom</code> が指定された場合は、これが Y 座標を定義し、もう一方の値が X 座標を定義します。</li> - <li>{{cssxref("<length>")}} または {{cssxref("<percentage>")}} の場合。もう一方の値が <code>left</code> または <code>right</code> の場合、この値は上辺からの相対的な Y 座標を定義します。もう一方の値が <code>top</code> または <code>bottom</code> の場合、この値は左辺からの相対的な X 座標を定義します。両方の値が <code><length></code> または <code><percentage></code> の値である場合は、最初の値が X 座標を定義し、2番目の値が Y 座標を定義します。</li> - <li>注: 一方の値が <code>top</code> または <code>bottom</code> である場合、もう一方の値を <code>top</code> または <code>bottom</code> にすることはできません。一方の値が <code>left</code> または <code>right</code> である場合、もう一方の値を <code>left</code> または <code>right</code> にすることはできません。すなわち、例えば <code>top top</code> や <code>left right</code> は妥当ではありません。</li> - <li>既定値は <code>top left</code> または <code>0% 0%</code> です。</li> - </ul> - </dd> - <dd> - <p><strong>値3つの構文:</strong> 2つの値はキーワード値で、3つ目の値はその前の値のオフセットです。</p> - - <ul> - <li>最初の値はキーワード値 <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, <code>center</code> のうちの1つです。ここで <code>left</code> または <code>right</code> が指定された場合は、これは X 座標を定義します。 <code>top</code> または <code>bottom</code> が指定された場合は、これは Y 座標を定義し、もう一方のキーワード値が X 座標を定義します。</li> - <li>{{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値が2番目の値であった場合は、最初の値に対するオフセットです。3番目の値であった場合は、2番目の値に対するオフセットです。</li> - <li>単一の長さまたはパーセント値は、その前のキーワード値に対するオフセットです。1つのキーワードに2つの keyword with two {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値の組み合わせは無効です。</li> - </ul> - </dd> - <dd> - <p><strong>値4つの構文:</strong> 1番目と3番目の値は、X と Y を定義するキーワード値で、2番目と4番目の値は、先行する X と Y のキーワード値のオフセットです。</p> - - <ul> - <li>1番目と3番目の値は <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> のうちの1つです。ここで <code>left</code> または <code>right</code> が指定された場合、これは X を定義します。 <code>top</code> または <code>bottom</code> が指定された場合、これは Y を表し、もう一方のキーワード値が X を表します。</li> - <li>2番目と4番目の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値です。2番目の値は1番目のキーワードのオフセットです。4番目の値は3番目の値のオフセットです。</li> - </ul> - </dd> - <dd> - <p><strong>パーセント値について</strong></p> - </dd> - <dd>指定された背景画像の位置のパーセント値のオフセットは、コンテナーに対して相対的なものです。 0% の値は、背景画像の左 (または上) の端がコンテナーの対応する左 (または上) の端に整列していることを意味するか、または、画像の 0% マークがコンテナーの 0% マーク上にあることを意味します。 100％ の値は、背景画像の<em>右</em> (または<em>下</em>) の縁が容器の<em>右</em> (または<em>下</em>) の縁と揃うか、または画像の 100％ マークが容器の100％マーク上になることを意味します。したがって、水平方向または垂直方向に 50% の値を設定すると、画像の 50% マークがコンテナーの 50% マーク上になるので、背景画像が中央に位置することになります。同様に、 <code>background-position: 25% 75%</code> は、画像の左から 25%、上から 75% の位置にある点が、コンテナの左から 25%、上から 75% の位置にあるコンテナーの点に配置されることを意味します。</dd> - <dd>基本的に何が起こるかというと、背景画像の寸法が対応するコンテナの寸法から<em>減算され</em>、その結果の値のパーセンテージが左端（または上端）からの直接のオフセットとして使用されます。</dd> - <dd> - <p><code>(コンテナーの幅 - 画像の幅) * (position x%) = (x オフセット値)<br> - (コンテナーの高さ - 画像の高さ) * (position y%) = (y オフセット値)</code></p> - - <p>X 軸を例にすると、幅 300px の画像があり、それを幅 100px のコンテナーに入れて、 background-size を auto に設定して使用しているとします。</p> - - <p><code>100px - 300px = -200px <em>(コンテナーと画像の差)</em></code></p> - - <p>ですから、位置のパーセント値が -25%, 0%, 50%, 100%, 125% であった場合、画像とコンテナーの橋のオフセット値は以下のようになります。</p> - - <p><code>-200px * -25% = 50px<br> - -200px * 0% = 0px<br> - -200px * 50% = -100px<br> - -200px * 100% = -200px </code><br> - <code>-200px * 125% = -250px </code></p> - - <p>そのため、この例の結果の値では、<strong>画像</strong>の<strong>左端</strong>が<strong>コンテナー</strong>の<strong>左端</strong>からオフセットされています。</p> - - <ul> - <li>+ 50px (画像の左端を100ピクセル幅のコンテナーの中央に配置)</li> - <li>0px (画像の左端がコンテナーの左端に一致)</li> - <li>-100px (画像の左端をコンテナーの左から 100px に配置。この例では画像の中央である 100px の位置が、コンテナーの中央になることを意味します)</li> - <li>-200px (画像の左端をコンテナーの左から 200px に配置。この例では右の画像の端が右のコンテナの端と一致することを意味します)</li> - <li>-250px (画像の左端をコンテナーの左から 250px に配置。この例では 300px 幅の画像の右端をコンテナの中央に置きます)</li> - </ul> - - <p>背景サイズが指定された軸のコンテナーのサイズと等しい場合、その軸のパーセンテージ位置は、「コンテナーと画像の差」がゼロになるので、何の効果もないことは言及しておく価値があります。絶対値を使ってオフセットする必要があります。</p> - </dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +``` + +`background-position` プロパティは 1 つ以上の `<position>` 値をカンマで区切って指定します。 + +### 値 + +- `<position>` + + - : {{cssxref("<position>")}} です。位置は要素のボックスの辺を基準にして項目を配置するための X/Y 座標を定義します。1～4つの値を使用して定義できます。2つのキーワード値でない値を使用する場合は、最初の値が水平位置を表し、2つ目の値が垂直位置を表します。1つの値しか指定されない場合、2つ目の値は `center` とみなされます。3つまたは4つの値が使用された場合は、 length-percentage 値はその前のキーワード値に対するオフセットです。 + + **値 1 つの構文:** 値は以下のようになります。 + + - `center` のキーワード値の場合は、画像を中央揃えにします。 + - キーワード値 `top`、 `left`、 `bottom`、 `right` のうちの一つの場合。アイテムを配置する辺を指定します。もう一方の寸法が 50% に設定されていれば、指定された端までの間の中央に配置されます。 + - {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の場合。これは左からの相対位置の X 座標を指定し、 Y 座標は 50% に設定されます。 + + **値 2 つの構文:** 1 つ目の値が X を定義し、もう 1 つの値が Y を定義します。両方が以下の値を取ることができます。 + + - キーワード値 `top`、 `left`、 `bottom`、 `right` のうちの一つの場合。ここで `left` または `right` が指定された場合は、これが X 座標を定義し、もう一方の値が Y 座標になります。 `top` または `bottom` が指定された場合は、これが Y 座標を定義し、もう一方の値が X 座標を定義します。 + - {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の場合。もう一方の値が `left` または `right` の場合、この値は上辺からの相対的な Y 座標を定義します。もう一方の値が `top` または `bottom` の場合、この値は左辺からの相対的な X 座標を定義します。両方の値が `<length>` または `<percentage>` の値である場合は、最初の値が X 座標を定義し、2 つ目の値が Y 座標を定義します。 + - 注: 一方の値が `top` または `bottom` である場合、もう一方の値を `top` または `bottom` にすることはできません。一方の値が `left` または `right` である場合、もう一方の値を `left` または `right` にすることはできません。すなわち、例えば `top top` や `left right` は妥当ではありません。 + - 既定値は `top left` または `0% 0%` です。 + + **値 3 つの構文:** 2 つの値はキーワード値で、3 つ目の値はその前の値のオフセットです。 + + - 最初の値はキーワード値 `top`, `left`, `bottom`, `right`, `center` のうちの 1 つです。ここで `left` または `right` が指定された場合は、これは X 座標を定義します。 `top` または `bottom` が指定された場合は、これは Y 座標を定義し、もう一方のキーワード値が X 座標を定義します。 + - {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値が 2 つ目の値であった場合は、最初の値に対するオフセットです。3 つ目の値であった場合は、2 つ目の値に対するオフセットです。 + - 単一の長さまたはパーセント値は、その前のキーワード値に対するオフセットです。1 つのキーワードに 2 つの keyword with two {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値の組み合わせは無効です。 + + **値 4 つの構文:** 1 つ目と 3 つ目の値は、X と Y を定義するキーワード値で、2 つ目と 4 つ目の値は、先行する X と Y のキーワード値のオフセットです。 + + - 1 つ目と 3 つ目の値は `top`, `left`, `bottom`, `right` のうちの 1 つです。ここで `left` または `right` が指定された場合、これは X を定義します。 `top` または `bottom` が指定された場合、これは Y を表し、もう一方のキーワード値が X を表します。 + - 2 つ目と 4 つ目の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値です。2 つ目の値は 1 つ目のキーワードのオフセットです。4 つ目の値は 3 つ目の値のオフセットです。 + +### パーセント値について + +指定された背景画像の位置のパーセント値のオフセットは、コンテナーに対して相対的なものです。 0% の値は、背景画像の左 (または上) の端がコンテナーの対応する左 (または上) の端に整列していることを意味するか、または、画像の 0% マークがコンテナーの 0% マーク上にあることを意味します。 100％ の値は、背景画像の*右* (または*下*) の縁がコンテナーの*右* (または*下*) の縁と揃うか、または画像の 100％ マークがコンテナーの 100% マーク上になることを意味します。したがって、水平方向または垂直方向に 50% の値を設定すると、画像の 50% マークがコンテナーの 50% マーク上になるので、背景画像が中央に位置することになります。同様に、 `background-position: 25% 75%` は、画像の左から 25%、上から 75% の位置にある点が、コンテナーの左から 25%、上から 75% の位置にあるコンテナーの点に配置されることを意味します。 + +基本的に何が起こるかというと、背景画像の寸法が対応するコンテナーの寸法から*減算され*、その結果の値のパーセント値が左端（または上端）からの直接のオフセットとして使用されます。 + +``` +(コンテナーの幅 - 画像の幅) * (position x%) = (x オフセット値) +(コンテナーの高さ - 画像の高さ) * (position y%) = (y オフセット値) +``` + +X 軸を例にすると、幅 300px の画像があり、それを幅 100px のコンテナーに入れて、 background-size を auto に設定して使用しているとします。 + +``` +100px - 300px = -200px (コンテナーと画像の差) +``` + +ですから、位置のパーセント値が -25%, 0%, 50%, 100%, 125% であった場合、画像とコンテナーの橋のオフセット値は以下のようになります。 + +``` +-200px * -25% = 50px +-200px * 0% = 0px +-200px * 50% = -100px +-200px * 100% = -200px +-200px * 125% = -250px +``` + +そのため、この例の結果の値では、**画像**の**左端**が**コンテナー**の**左端**からオフセットされています。 + +- \+ 50px (画像の左端を 100 ピクセル幅のコンテナーの中央に配置) +- 0px (画像の左端がコンテナーの左端に一致) +- -100px (画像の左端をコンテナーの左から 100px に配置。この例では画像の中央である 100px の位置が、コンテナーの中央になることを意味します) +- -200px (画像の左端をコンテナーの左から 200px に配置。この例では右の画像の端が右のコンテナーの端と一致することを意味します) +- -250px (画像の左端をコンテナーの左から 250px に配置。この例では 300px 幅の画像の右端をコンテナーの中央に置きます) + +背景サイズが指定された軸のコンテナーのサイズと等しい場合、その軸のパーセント値位置は、「コンテナーと画像の差」がゼロになるので、何の効果もないことは言及しておく価値があります。絶対値を使ってオフセットする必要があります。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Positioning_background_images" name="Positioning_background_images">背景画像の位置指定</h3> +<h3 id="Positioning_background_images">背景画像の位置指定</h3> -<p>以下の3つの例は、 {{cssxref("background")}} を使って黄色い四角形の要素とその中に星の画像を作成します。それぞれの例で、星は異なる位置にあります。加えて、3番目の例では1つの要素内にある2つの異なる背景画像の位置を指定する方法を示しています。</p> +以下の 3 つの例は、 {{cssxref("background")}} を使って黄色い四角形の要素とその中に星の画像を作成します。それぞれの例で、星は異なる位置にあります。加えて、3 つ目の例では 1 つの要素内にある 2 つの異なる背景画像の位置を指定する方法を示しています。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="exampleone">Example One</div> -<div class="exampletwo">Example Two</div> -<div class="examplethree">Example Three</div></pre> +```html +<div class="exampleone">Example One</div> +<div class="exampletwo">Example Two</div> +<div class="examplethree">Example Three</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">/* すべての <div> で共有される */ +```css +/* すべての <div> で共有される */ div { background-color: #FFEE99; background-repeat: no-repeat; @@ -159,71 +155,39 @@ div { /* これらの例は background 一括指定プロパティを使用しています */ .exampleone { - background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat; + background: url("startransparent.gif") #FFEE99 2.5cm bottom no-repeat; } .exampletwo { - background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 left 4em bottom 1em no-repeat; + background: url("startransparent.gif") #FFEE99 left 4em bottom 1em no-repeat; } /* 複数の背景画像: 各画像は対応する位置スタイルに、 最初に指定されたものから順に対応付けられます。 */ .examplethree { - background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), - url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-image: url("startransparent.gif"), + url("catfront.png"); background-position: 0px 0px, right 3em bottom 2em; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Positioning_background_images', 420, 200)}}</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('CSS3 Backgrounds', '#background-position', 'background-position')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>複数の背景のサポートを追加。4個の値を持つ構文、実装に一致するように割合の定義を調整。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>キーワード値と {{cssxref("<length>")}} および {{cssxref("<percentage>")}} の値の混合指定を許容。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.background-position")}}</p> - -<h3 id="Quantum_CSS_notes" name="Quantum_CSS_notes">Quantum CSS のメモ</h3> - -<ul> - <li>Gecko には <code>background-position</code> が異なる数の {{cssxref("<position>")}} の値を持つ2つの値の {{cssxref("transition")}} ができないというバグがあります。例えば <code>background-position: 10px 10px;</code> と <code>background-position: 20px 20px, 30px 30px;</code> などです（{{bug(1390446)}} を参照）。 Firefox の新しいパラレル CSS エンジン (<a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> または <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> と呼ばれており、 Firefox 57 でリリース予定) では修正されています。</li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("background-position-x")}}</li> - <li>{{cssxref("background-position-y")}}</li> - <li>{{cssxref("background-position-inline")}}</li> - <li>{{cssxref("background-position-block")}}</li> - <li><a href="/ja/docs/Web/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">複数の背景</a></li> - <li>{{cssxref("transform-origin")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('Positioning_background_images', 420, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("background-position-x")}} +- {{cssxref("background-position-y")}} +- {{cssxref("background-position-inline")}} +- {{cssxref("background-position-block")}} +- [複数の背景の使用](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/background-position/startransparent.gif b/files/ja/web/css/background-position/startransparent.gif Binary files differnew file mode 100644 index 0000000000..754f7e7dff --- /dev/null +++ b/files/ja/web/css/background-position/startransparent.gif diff --git a/files/ja/web/css/background-repeat/index.md b/files/ja/web/css/background-repeat/index.md index 216cebb980..9d462e7600 100644 --- a/files/ja/web/css/background-repeat/index.md +++ b/files/ja/web/css/background-repeat/index.md @@ -2,27 +2,26 @@ title: background-repeat slug: Web/CSS/background-repeat tags: - - Background - CSS + - CSS 背景 - CSS プロパティ - - CSS 背景と境界 - - background-repeat - リファレンス + - recipe:css-property +browser-compat: css.properties.background-repeat translation_of: Web/CSS/background-repeat --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>background-repeat</code></strong> プロパティは、背景画像をどのように繰り返すかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく繰り返さないようにしたりすることができます。</p> +**`background-repeat`** は [CSS](/ja/docs/Web/CSS) のプロパティで、背景画像をどのように繰り返すかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく繰り返さないようにしたりすることができます。 -<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-repeat.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +既定では、繰り返された画像が要素の大きさで切り取られます。他にも、背景画像の拡縮を伴う方法 (`round` を使用) や、背景画像間に余白を挿入する方法 (`space` を使用) など、別の敷き詰め方法を選択することも可能です。 -<p>既定では、繰り返された画像が要素のサイズによって切り取られます。他にも、背景画像のリサイズを伴う方法 (<code>round</code> を使用) や、背景画像間にスペースを挿入する方法 (<code>space</code> を使用) など、別の敷き詰め方法を選択することも可能です。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css notranslate">/* キーワード値 */ +```css +/* キーワード値 */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; @@ -39,107 +38,123 @@ background-repeat: no-repeat round; /* グローバル値 */ background-repeat: inherit; background-repeat: initial; +background-repeat: revert; background-repeat: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><repeat-style></code></dt> - <dd>値1つの構文は完全な値2つの構文に対する一括指定です。</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <td><strong>単一の値</strong></td> - <td><strong>対応するペアの値</strong></td> - </tr> - <tr> - <td><code>repeat-x</code></td> - <td><code>repeat no-repeat</code></td> - </tr> - <tr> - <td><code>repeat-y</code></td> - <td><code>no-repeat repeat</code></td> - </tr> - <tr> - <td><code>repeat</code></td> - <td><code>repeat repeat</code></td> - </tr> - <tr> - <td><code>space</code></td> - <td><code>space space</code></td> - </tr> - <tr> - <td><code>round</code></td> - <td><code>round round</code></td> - </tr> - <tr> - <td><code>no-repeat</code></td> - <td><code>no-repeat no-repeat</code></td> - </tr> - </tbody> - </table> - 値 2 つの構文では、最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。以下は各値が各方向にどう働くかの説明です:</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <td><code>repeat</code></td> - <td>画像は描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は切り取られます。</td> - </tr> - <tr> - <td><code>space</code></td> - <td>画像は指定された方向に切り抜きなしで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。{{cssxref("background-position")}} プロパティは、画像を 1 つしか切り抜きなしで敷き詰められない場合を除き、無視されます。<code>space</code> を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。</td> - </tr> - <tr> - <td><code>round</code></td> - <td>利用できる空間が広がるにつれ、繰り返し描画された画像は、画像をもう1つ追加するだけの余裕 (残りの空間 ≧ 画像の幅の半分) ができるまで、 (隙間を空けずに) 伸長されます。次の画像が追加されると、描画されたすべての画像が収まるように縮小されます。例えば、元々の幅が 260px の画像が3回繰り返されているとき、それぞれが幅 300px になるまで伸長され、それから画像がもう1つ追加されます。そのときそれぞれは 225px に縮小されます。</td> - </tr> - <tr> - <td><code>no-repeat</code></td> - <td>画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は {{cssxref("background-position")}} CSS プロパティで定義されます。</td> - </tr> - </tbody> - </table> - </dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +### 値 + +- `<repeat-style>` + - : 値 1 つの構文は完全な値 2 つの構文に対する一括指定です。 + + <table class="standard-table"> + <tbody> + <tr> + <td><strong>単一の値</strong></td> + <td><strong>対応するペアの値</strong></td> + </tr> + <tr> + <td><code>repeat-x</code></td> + <td><code>repeat no-repeat</code></td> + </tr> + <tr> + <td><code>repeat-y</code></td> + <td><code>no-repeat repeat</code></td> + </tr> + <tr> + <td><code>repeat</code></td> + <td><code>repeat repeat</code></td> + </tr> + <tr> + <td><code>space</code></td> + <td><code>space space</code></td> + </tr> + <tr> + <td><code>round</code></td> + <td><code>round round</code></td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td><code>no-repeat no-repeat</code></td> + </tr> + </tbody> + </table> + + 値 2 つの構文では、最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。以下は各値が各方向にどう働くかの説明です。 + + <table class="standard-table"> + <tbody> + <tr> + <td><code>repeat</code></td> + <td> + 画像は描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は切り取られます。 + </td> + </tr> + <tr> + <td><code>space</code></td> + <td> + 画像は指定された方向に切り抜きなしで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。{{cssxref("background-position")}} プロパティは、画像を 1 つしか切り抜きなしで敷き詰められない場合を除き、無視されます。`space` を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。 + </td> + </tr> + <tr> + <td><code>round</code></td> + <td> + 利用できる空間が広がるにつれ、繰り返し描画された画像は、画像をもう1つ追加するだけの余裕 (残りの空間 ≧ 画像の幅の半分) ができるまで、 (隙間を空けずに) 伸長されます。次の画像が追加されると、描画されたすべての画像が収まるように縮小されます。例えば、元々の幅が 260px の画像が3回繰り返されているとき、それぞれが幅 300px になるまで伸長され、それから画像がもう1つ追加されます。そのときそれぞれは 225px に縮小されます。 + </td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td> + 画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は {{cssxref("background-position")}} CSS プロパティで定義されます。 + </td> + </tr> + </tbody> + </table> + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML" name="HTML">HTML</h3> - -<pre class="brush: html notranslate"><ol> - <li>no-repeat - <div class="one"></div> - </li> - <li>repeat - <div class="two"></div> - </li> - <li>repeat-x - <div class="three"></div> - </li> - <li>repeat-y - <div class="four"></div> - </li> - <li>space - <div class="five"></div> - </li> - <li>round - <div class="six"></div> - </li> - <li>repeat-x, repeat-y (multiple images) - <div class="seven"></div> - </li> -</ol></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">/* 例のすべての div で共通 */ +## 例 + +<h3 id="Setting_background-repeat">background-repeat の設定</h3> + +#### HTML + +```html +<ol> + <li>no-repeat + <div class="one"></div> + </li> + <li>repeat + <div class="two"></div> + </li> + <li>repeat-x + <div class="three"></div> + </li> + <li>repeat-y + <div class="four"></div> + </li> + <li>space + <div class="five"></div> + </li> + <li>round + <div class="six"></div> + </li> + <li>repeat-x, repeat-y (multiple images) + <div class="seven"></div> + </li> +</ol> +``` + +#### CSS + +```css +/* 例のすべての div で共通 */ ol, li { margin: 0; @@ -149,7 +164,7 @@ li { margin-bottom: 12px; } div { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); + background-image: url(starsolid.gif); width: 160px; height: 70px; } @@ -176,56 +191,28 @@ div { /* 複数の画像 */ .seven { - background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), + background-image: url(starsolid.gif), url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>この例では、リストの各要素に <code>background-repeat</code> の異なる値が対応付けられています。</p> - -<p>{{EmbedLiveSample('Examples', 240, 560)}}</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('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>複数の背景画像、水平・垂直方向にそれぞれ別の繰り返し方法を指定できる値 2 つの構文、<code>space</code> と <code>round</code> キーワード、および背景描画領域を明確に定義したことによる、インラインレベル要素に対する背景のサポートの追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>特筆すべき変更点はなし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.background-repeat", "background-repeat")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Using_CSS_multiple_backgrounds" title="CSS/Using_CSS_multiple_backgrounds">CSS での複数の背景の利用方法</a></li> -</ul> +} +``` + +#### 結果 + +この例では、リストの各要素に `background-repeat` の異なる値が対応付けられています。 + +{{EmbedLiveSample('Setting_background-repeat', 240, 560)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS での複数の背景の利用方法](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/ja/web/css/background-repeat/starsolid.gif b/files/ja/web/css/background-repeat/starsolid.gif Binary files differnew file mode 100644 index 0000000000..5508bef9c0 --- /dev/null +++ b/files/ja/web/css/background-repeat/starsolid.gif diff --git a/files/ja/web/css/background-size/index.md b/files/ja/web/css/background-size/index.md index ee81417c6b..1c2d6b1648 100644 --- a/files/ja/web/css/background-size/index.md +++ b/files/ja/web/css/background-size/index.md @@ -2,145 +2,114 @@ title: background-size slug: Web/CSS/background-size tags: - - Background - CSS + - CSS 背景 - CSS プロパティ - - CSS 背景と境界 - - Reference - - background-size + - リファレンス + - recipe:css-property +browser-compat: css.properties.background-size translation_of: Web/CSS/background-size --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>background-size</code></strong> は <a href="/ja/docs/CSS">CSS</a> のプロパティで、要素の背景画像の寸法を設定します。画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。</p> +**`background-size`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の背景画像の寸法を設定します。画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。 -<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div> +{{EmbedInteractiveExample("pages/css/background-size.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +背景画像に覆われていない領域は {{cssxref("background-color")}} プロパティで埋められ、背景画像の後ろに見える背景色は透過性があります。 -<p>背景画像に覆われていない領域は {{cssxref("background-color")}} プロパティで埋められ、背景画像の後ろに見える背景色は透過性があります。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ background-size: cover; background-size: contain; -/* 値1つの構文 */ +/* 値 1 つの構文 */ /* 画像の幅 (高さは 'auto' になる) */ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; -/* 値2つの構文 */ -/* 1番目の値は画像の幅、2番目の値は高さ */ +/* 値 2 つの構文 */ +/* 1 つ目の値は画像の幅、2番目の値は高さ */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* 複数の背景 */ -background-size: auto, auto; /* 'auto auto' と混同しないでください */ +background-size: auto, auto; /* `auto auto` と混同しないでください */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* グローバル値 */ background-size: inherit; background-size: initial; +background-size: revert; background-size: unset; -</pre> - -<p><code>background-size</code> プロパティは以下のいずれか1つの方法で指定します。</p> - -<ul> - <li><code><a href="#contain">contain</a></code> または <code><a href="#cover">cover</a></code> のキーワード値を使用</li> - <li>幅の値のみを使用、この場合の高さは既定の <code><a href="#auto">auto</a></code> になります。</li> - <li>幅と高さの値の両方を使用、この場合は1番目の値で幅を、2番目の値で高さを設定します。どちらの値も {{cssxref("<length>")}}、 {{cssxref("<percentage>")}} または <code><a href="#auto">auto</a></code> のいずれかになります。</li> -</ul> - -<p>複数の背景画像の寸法を指定するには、それぞれの値をカンマで区切ってください。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="contain"><code>contain</code></dt> - <dd>画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。</dd> - <dt id="cover"><code>cover</code></dt> - <dd>画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。</dd> - <dt id="auto"><code>auto</code></dt> - <dd>縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。</dd> - <dt id="length">{{cssxref("<length>")}}</dt> - <dd>その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。</dd> - <dt id="percentage">{{cssxref("<percentage>")}}</dt> - <dd>その軸が<em>背景配置領域</em>の指定された割合になるよう拡大縮小します。背景配置領域とは、 {{cssxref("background-origin")}} の値（既定ではパディングボックス）によって定められます。しかし、背景の {{cssxref("background-attachment")}} の値が <code>fixed</code> の場合、配置領域は{{glossary("viewport", "ビューポート")}}全体となります。負の値は使用できません。</dd> -</dl> - -<h3 id="Intrinsic_dimensions_and_proportions" name="Intrinsic_dimensions_and_proportions">固有の軸と比率</h3> - -<p>値の計算は画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。属性は以下の通りです。</p> - -<ul> - <li>ビットマップ画像 (JPG など) には、常に固有の寸法と比率があります。</li> - <li>ベクター画像 (SVG など) には固有の寸法がないことがあります。水平と垂直の両方に固有の寸法がある場合は、固有の比率もあります。固有の寸法がなかったり、一方しかなかったりする場合は、固有の比率がある場合もあるしない場合もあります。</li> - <li>CSS の {{cssxref("<gradient>")}} には固有の寸法も固有の比率もありません。</li> - <li>{{cssxref("element()")}} 関数によって作成された背景画像では、それを作成する要素の固有の寸法と比率を使用します。</li> -</ul> - -<div class="note"> -<p><strong>メモ:</strong> <code><gradient></code> の振る舞いは Gecko 8.0 {{geckoRelease("8.0")}} で変更されました。それより前は、固有の寸法がないものの、背景配置領域と同じ比率の画像として扱われていました。</p> -</div> +``` -<div class="note"> -<p><strong>メモ:</strong> Gecko では、 {{cssxref("element()")}} 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な固有の比率を持ちます。これは非標準の振る舞いです。</p> -</div> +`background-size` プロパティは以下のいずれか 1 つの方法で指定します。 -<p>固有の寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。</p> - -<dl> - <dt><code>background-size</code> の幅と高さがともに定義されていて <code>auto</code> でない場合</dt> - <dd>背景画像は指定の寸法で描画されます。</dd> - <dt><code>background-size</code> が <code>contain</code> または <code>cover</code> の場合</dt> - <dd>固有の比率を維持するため、画像は背景配置領域の中に収まるか、背景配置領域を覆うように描画されます。画像が固有の比率を持たない場合は、背景配置領域の寸法で描画されます。</dd> - <dt><code>background-size</code> が <code>auto</code> または <code>auto auto</code> の場合</dt> - <dd> - <ul> - <li>画像に水平および垂直の固有の寸法がある場合は、その寸法で描画されます。</li> - <li>画像に固有の寸法も固有の比率もない場合は、背景配置領域の寸法で描画されます。</li> - <li>画像に固有の寸法はない物の固有の比率がある場合は、 <code>contain</code> が指定された場合のように描画されます。</li> - <li>画像に一方だけ固有の寸法があり、固有の比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と固有の比率を使用して計算されます。</li> - <li>画像に一方だけ固有の寸法があり、固有の比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。</li> - </ul> - </dd> - <dd> - <div class="note"><strong>メモ:</strong> SVG 画像には <code><a href="/ja/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> 属性があり、既定では <code>contain</code> と同等です。 Firefox 43 では、 Chrome 52 とは対照的に、明確に <code>background-size</code> が設定されると <code>preserveAspectRatio</code> が無視されます。</div> - </dd> - <dt><code>background-size</code> の一方が <code>auto</code> でもう一方が <code>auto</code> ではない場合</dt> - <dd> - <ul> - <li>画像に固有の比率がある場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は指定された寸法と固有の比率を使用して計算されます。</li> - <li>画像に固有の比率がない場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような固有の寸法がない場合、背景配置領域の適切な寸法になります。</li> - </ul> - </dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> 固有の寸法や比率を持たないベクター画像の背景の拡大縮小は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。</p> -</div> +- `contain` または `cover` のキーワード値を使用 +- 幅の値のみを使用、この場合の高さは既定の `auto` になります。 +- 幅と高さの値の両方を使用、この場合は 1 番目の値で幅を、2 番目の値で高さを設定します。どちらの値も {{cssxref("<length>")}}、 {{cssxref("<percentage>")}} または `auto` のいずれかになります。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +複数の背景画像の寸法を指定するには、それぞれの値をカンマで区切ってください。 -{{csssyntax}} +### 値 + +- `contain` + - : 画像を切り取ったり縦横比を崩したりすることなく、コンテナー内で可能な限り大きくします。コンテナーが画像よりも大きい場合、{{cssxref("background-repeat")}} プロパティが `no-repeat` に設定されていない限り、画像がタイル状に配置されます。 +- `cover` + - : 画像をコンテナーいっぱいにできるだけ大きく拡大縮小し、必要に応じて画像を引き伸ばします。画像の比率が要素と異なる場合は、何もない空間が残らないように、上下または左右が切り取られます。 +- `auto` + - : 背景画像の本来の比率が維持されるように、対応する方向に拡大縮小します。 +- {{cssxref("<length>")}} + - : その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。 +- {{cssxref("<percentage>")}} + - : その軸が*背景配置領域*の指定された割合になるよう拡大縮小します。背景配置領域とは、 {{cssxref("background-origin")}} の値 (既定ではパディングボックス) によって定められます。しかし、背景の {{cssxref("background-attachment")}} の値が `fixed` の場合、配置領域は{{glossary("viewport", "ビューポート")}}全体となります。負の値は使用できません。 + +## 固有の軸と比率 + +値の計算は画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。属性は以下の通りです。 + +- ビットマップ画像 (JPG など) には、常に固有の寸法と比率があります。 +- ベクター画像 (SVG など) には固有の寸法がないことがあります。水平と垂直の両方に固有の寸法がある場合は、固有の比率もあります。固有の寸法がなかったり、一方しかなかったりする場合は、固有の比率がある場合もあるしない場合もあります。 +- CSS の {{cssxref("<gradient>")}} には固有の寸法も固有の比率もありません。 +- {{cssxref("element()")}} 関数によって作成された背景画像では、それを作成する要素の固有の寸法と比率を使用します。 + +> **Note:** Gecko では、 {{cssxref("element()")}} 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な固有の比率を持ちます。これは非標準の振る舞いです。 -<h2 id="Examples" name="Examples">例</h2> +固有の寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。 -<p>例については <a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Scaling background images</a> を参照してください。</p> +- **`background-size` の幅と高さがともに定義されていて `auto` でない場合:** 背景画像は指定の寸法で描画されます。 +- **`background-size` が `contain` または `cover` の場合:** 固有の比率を維持するため、画像は背景配置領域の中に収まるか、背景配置領域を覆うように描画されます。画像が固有の比率を持たない場合は、背景配置領域の寸法で描画されます。 +- **`background-size` が `auto` または `auto auto` の場合:** -<h2 id="Notes" name="Notes">メモ</h2> + - 画像に水平および垂直の固有の寸法がある場合は、その寸法で描画されます。 + - 画像に固有の寸法も固有の比率もない場合は、背景配置領域の寸法で描画されます。 + - 画像に固有の寸法はない物の固有の比率がある場合は、 `contain` が指定された場合のように描画されます。 + - 画像に一方だけ固有の寸法があり、固有の比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と固有の比率を使用して計算されます。 + - 画像に一方だけ固有の寸法があり、固有の比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。 -<p>背景としてグラデーションを定義し、<code>background-size</code> をそれにあわせて定義した場合には、単独の auto を使うサイズを指定しないか、width 値だけを使って定義するのがよいでしょう (例えば <code>background-size: 50%</code>)。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ <a href="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 の <code>background-size</code> 仕様</a> や <a href="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 の Image Values gradient 仕様</a> に完全準拠した描画方式をすべて実装していない他ブラウザと、たいていは一致しません。</p> + > **Note:** SVG 画像には [`preserveAspectRatio`](/ja/docs/Web/SVG/Attribute/preserveAspectRatio) 属性があり、既定では `contain` と同等です。明示的に `background-size` が設定されると `preserveAspectRatio` が無視されます。 -<pre class="brush: css notranslate">.gradient-example { +- **`background-size` の一方が `auto` でもう一方が `auto` ではない場合:** + + - 画像に固有の比率がある場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は指定された寸法と固有の比率を使用して計算されます。 + - 画像に固有の比率がない場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような固有の寸法がない場合、背景配置領域の適切な寸法になります。 + + > **Note:** 固有の寸法や比率を持たないベクター画像の背景の拡大縮小は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。 + +### グラデーションでの動き + +背景に `<gradient>` を使用し、それに合わせて `background-size` を指定した場合、`auto` を 1 つだけ使用する大きさや、幅の値だけで指定する大きさ (例: `background-size: 50%`) は、指定しないほうがよいでしょう。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ [CSS3 の `background-size` 仕様](https://www.w3.org/TR/css3-background/#the-background-size)や [CSS3 の Image Values gradient 仕様](https://dev.w3.org/csswg/css3-images/#gradients)に完全準拠した描画方式をすべて実装していない他ブラウザーと、たいていは一致しません。 + +```css +.gradient-example { width: 50px; height: 100px; background-image: linear-gradient(blue, red); @@ -155,39 +124,60 @@ background-size: unset; background-size: 25px 50px; background-size: 50% 50%; } -</pre> - -<p>なお、 <code><gradient></code> に対してピクセルの寸法と <code>auto</code> を利用することは推奨されません。 Firefox の 8 より前と、 Firefox 8 のレンダリングを実装していないブラウザーでは、背景が指定されている要素の正確な寸法が分からないと、レンダリングできないからです。</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('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.background-size")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">背景画像の拡大縮小</a></li> - <li><a href="/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds">背景 SVG の拡大縮小</a></li> - <li>{{cssxref("object-fit")}}</li> -</ul> +``` + +なお、 `<gradient>` に対してピクセルの寸法と `auto` を利用することは推奨されません。 Firefox の 8 より前と、 Firefox 8 のレンダリングを実装していないブラウザーでは、背景が指定されている要素の正確な寸法が分からないと、レンダリングできないからです。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +<h3 id="Tiling_a_large_image">巨大な画像をタイル表示</h3> + +2982 x 2808 の Firefox ロゴ画像という大きな画像を考えてみましょう。この画像のコピーを 4 枚、300 x 300 ピクセルの要素にタイル状に配置したいとします。これを実現するには、固定の `background-size` 値として 150 ピクセルを使用します。 + +#### HTML + +```html +<div class="tiledBackground"> +</div> +``` + +#### CSS + +```css +.tiledBackground { + background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); + background-size: 150px; + width: 300px; + height: 300px; + border: 2px solid; + color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}} + +その他の例は[背景画像の拡大縮小](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [背景画像の拡大縮小](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) +- [背景 SVG の拡大縮小](/ja/docs/Web/CSS/Scaling_of_SVG_backgrounds) +- {{cssxref("object-fit")}} diff --git a/files/ja/web/css/background/index.md b/files/ja/web/css/background/index.md index 49207bfa58..8b1ede2172 100644 --- a/files/ja/web/css/background/index.md +++ b/files/ja/web/css/background/index.md @@ -3,170 +3,143 @@ title: background slug: Web/CSS/background tags: - CSS - - CSS Background - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS 背景 + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.background translation_of: Web/CSS/background --- -<p>{{CSSRef("CSS Background")}}</p> +{{CSSRef("CSS Background")}} -<p><span class="seoSummary"><strong><code>background</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。</span></p> +**`background`** は [CSS](/ja/docs/Web/CSS) の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。 -<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div> +{{EmbedInteractiveExample("pages/css/background.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構成要素のプロパティ -<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2> +このプロパティは以下の CSS プロパティの一括指定です。 -<p>このプロパティは以下の CSS プロパティの一括指定です。</p> +- {{cssxref("background-attachment")}} +- {{cssxref("background-clip")}} +- {{cssxref("background-color")}} +- {{cssxref("background-image")}} +- {{cssxref("background-origin")}} +- {{cssxref("background-position")}} +- {{cssxref("background-repeat")}} +- {{cssxref("background-size")}} -<ul> - <li>{{cssxref("background-attachment")}}</li> - <li>{{cssxref("background-clip")}}</li> - <li>{{cssxref("background-color")}}</li> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("background-origin")}}</li> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-repeat")}}</li> - <li>{{cssxref("background-size")}}</li> -</ul> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* <background-color> を使用 */ +```css +/* <background-color> を使用 */ background: green; -/* <bg-image> と <repeat-style> を使用 */ +/* <bg-image> と <repeat-style> を使用 */ background: url("test.jpg") repeat-y; -/* <box> と <background-color> を使用 */ +/* <box> と <background-color> を使用 */ background: border-box red; /* 単一の画像、中央寄せかつ縮小 */ background: no-repeat center/80% url("../img/image.png"); -</pre> - -<p><code>background</code> プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。</p> - -<p>それぞれのレイヤーの構文は以下の通りです。</p> - -<ul> - <li>それぞれのレイヤーは、以下の値をそれぞれ0～1回含めることができます。 - <ul> - <li><code><a href="#<attachment>"><attachment></a></code></li> - <li><code><a href="#<bg-image>"><bg-image></a></code></li> - <li><code><a href="#<position>"><position></a></code></li> - <li><code><a href="#<bg-size>"><bg-size></a></code></li> - <li><code><a href="#<repeat-style>"><repeat-style></a></code></li> - </ul> - </li> - <li><code><a href="#<bg-size>"><bg-size></a></code> の値は <code><a href="#<position>"><position></a></code> の直後に '/' の文字で区切って含めなければなりません。例: "<code>center/80%</code>"</li> - <li><code><a href="#<box>"><box></a></code> の値は0～2回含めることができます。1回の場合は {{cssxref("background-origin")}} と {{cssxref("background-clip")}} の両方に設定されます。2回の場合は、1つ目は {{cssxref("background-origin")}} に、2つ目は {{cssxref("background-clip")}} に設定されます。</li> - <li><code><a href="#<background-color>"><background-color></a></code> の値は最後のレイヤーの指定でのみ含めることができます。</li> -</ul> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="<attachment>"><code><attachment></code></dt> - <dd>{{cssxref("background-attachment")}} を参照</dd> - <dt id="<box>"><code><box></code></dt> - <dd>{{cssxref("background-clip")}} 及び {{cssxref("background-origin")}} を参照</dd> - <dt id="<background-color>"><code><background-color></code></dt> - <dd>{{cssxref("background-color")}} を参照</dd> - <dt id="<bg-image>"><code><bg-image></code></dt> - <dd>{{Cssxref("background-image")}} を参照</dd> - <dt id="<position>"><code><position></code></dt> - <dd>{{cssxref("background-position")}} を参照</dd> - <dt id="<repeat-style>"><code><repeat-style></code></dt> - <dd>{{cssxref("background-repeat")}} を参照</dd> - <dt id="<bg-size>"><code><bg-size></code></dt> - <dd>{{cssxref("background-size")}} を参照。</dd> -</dl> - -<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 href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +/* グローバル値 */ +background: inherit; +background: initial; +background: revert; +background: unset; +``` + +`background` プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。 + +それぞれのレイヤーの構文は以下の通りです。 + +- それぞれのレイヤーは、以下の値をそれぞれ 0 ～ 1 回含めることができます。 + + - `<attachment>` + - `<bg-image>` + - `<position>` + - `<bg-size>` + - `<repeat-style>` + +- `<bg-size>` の値は `<position>` の直後に '/' の文字で区切って含めなければなりません。例: "`center/80%`" +- `<box>` の値は 0 ～ 2 回含めることができます。1 回の場合は {{cssxref("background-origin")}} と {{cssxref("background-clip")}} の両方に設定されます。2 回の場合は、1 つ目は {{cssxref("background-origin")}} に、2 つ目は {{cssxref("background-clip")}} に設定されます。 +- `<background-color>` の値は最後のレイヤーの指定でのみ含めることができます。 + +### 値 + +- `<attachment>` + - : {{cssxref("background-attachment")}} を参照 +- `<box>` + - : {{cssxref("background-clip")}} および {{cssxref("background-origin")}} を参照 +- `<background-color>` + - : {{cssxref("background-color")}} を参照 +- `<bg-image>` + - : {{Cssxref("background-image")}} を参照 +- `<position>` + - : {{cssxref("background-position")}} を参照 +- `<repeat-style>` + - : {{cssxref("background-repeat")}} を参照 +- `<bg-size>` + - : {{cssxref("background-size")}} を参照。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要であり、画面リーダーはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。 + +- [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) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_backgrounds_with_color_keywords_and_images" name="Setting_backgrounds_with_color_keywords_and_images">色キーワードと画像による背景の設定</h3> +<h3 id="Setting_backgrounds_with_color_keywords_and_images">色キーワードと画像による背景の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p class="topbanner"> - Starry sky<br/> - Twinkle twinkle<br/> +```html +<p class="topbanner"> + Starry sky<br/> + Twinkle twinkle<br/> Starry sky -</p> -<p class="warning">Here is a paragraph<p></pre> +</p> +<p class="warning">Here is a paragraph<p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush:css' highlight:[2,6]; notranslate">.warning { +```css +.warning { background: pink; } .topbanner { - background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; + background: url("starsolid.gif") #99f repeat-y fixed; } -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}</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('CSS3 Backgrounds', '#the-background', 'background')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>一括指定プロパティが拡張され、複数の背景と新しい {{cssxref("background-size")}}, {{cssxref("background-origin")}}, {{cssxref("background-clip")}} プロパティに対応した。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>重要な変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background', 'background')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.background")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("box-decoration-break")}}</li> - <li><a href="/ja/docs/Web/CSS/Using_CSS_gradients">グラデーションの使用</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">複数の背景の使用</a></li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("box-decoration-break")}} +- [グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [複数の背景の使用](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) diff --git a/files/ja/web/css/box-shadow/index.md b/files/ja/web/css/box-shadow/index.md index c33f487fb6..82926bab45 100644 --- a/files/ja/web/css/box-shadow/index.md +++ b/files/ja/web/css/box-shadow/index.md @@ -3,37 +3,33 @@ title: box-shadow slug: Web/CSS/box-shadow tags: - CSS - - CSS Backgrounds and Borders - - CSS Property - - CSS Styles - - CSS スタイル - - CSS プロパティ - CSS 背景と境界 + - CSS プロパティ + - CSS スタイル - HTML Colors - - Reference - - Shadows + - リファレンス + - 影 - Styles - Styling HTML - box-shadow - - 'recipe:css-property' - - 影 + - recipe:css-property +browser-compat: css.properties.box-shadow translation_of: Web/CSS/box-shadow --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>box-shadow</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。</span>ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。</p> +**`box-shadow`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。 -<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div> +{{EmbedInteractiveExample("pages/css/box-shadow.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +`box-shadow` プロパティで、ほぼすべての要素のフレームからドロップシャドウを作成することができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数の[テキストの影](/ja/docs/Web/CSS/text-shadow)の場合と同様になります (最初に指定された影が最も手前に来ます)。 -<p><code>box-shadow</code> プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数の<a href="/ja/CSS/text-shadow">テキストの影</a>の場合と同様になります (最初に指定された影が最も手前に来ます)。</p> +[ボックスの影作成ツール](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator)は、 `box-shadow` を対話的に作成できるツールです。 -<p><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator">ボックスの影作成ツール</a>は、 <code>box-shadow</code> を対話的に作成できるツールです。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ box-shadow: none; /* offset-x | offset-y | color */ @@ -54,137 +50,126 @@ box-shadow: 3px 3px red, -1em 0 0.4em olive; /* グローバルキーワード */ box-shadow: inherit; box-shadow: initial; +box-shadow: revert; box-shadow: unset; -</pre> - -<p>単一の box-shadow の使用を指定してみます。</p> - -<ul> - <li>二つ、三つ、四つの <code><a href="/ja/docs/Web/CSS/length"><length></a></code> 値 - - <ul> - <li>値が二つだけ与えられた場合、 <code><a href="#offset-x"><offset-x><offset-y></a></code> として解釈されます。</li> - <li>値が三つ与えられた場合、 <code><a href="#blur-radius"><blur-radius></a></code> として解釈されます。</li> - <li>値が四つ与えられた場合、 <code><a href="#spread-radius"><spread-radius></a></code> として解釈されます。</li> - </ul> - </li> - <li>任意で、 <code><a href="#inset">inset</a></code> キーワード</li> - <li>任意で、 <code><a href="#color"><color></a></code> の値</li> -</ul> - -<p>複数の影を指定するには、影をカンマで区切ったリストを提供します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="inset"><code>inset</code></dt> - <dd>指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。<br> - <code>inset</code> キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 <code>inset</code> な影は背景の上、境界や内容の下に描画されます。</dd> - <dt id="offset-x"><code><offset-x></code> <code><offset-y></code></dt> - <dd>これら２つの {{cssxref("<length>")}} 値は、影のオフセットを設定します。 <code><offset-x></code> は水平方向の距離を表します。負の値が指定された場合、影は左方向に延びます。 <code><offset-y></code> は垂直方向の距離を表します。負の値が指定された場合、影は上方向に延びます。利用可能な値の単位については {{cssxref("<length>")}} をご覧ください。<br> - どちらのオフセットも <code>0</code> である場合、影は要素の裏に配置されます。 (<code><blur-radius></code> や <code><spread-radius></code> が指定されている場合は、ぼかし効果が与えられるでしょう。)</dd> - <dt id="blur-radius"><code><blur-radius></code></dt> - <dd>これは３番目の {{cssxref("<length>")}} 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は <code>0</code> となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。</dd> - <dd> - <blockquote>…影の辺が長くまっすぐな場合、影の辺に垂直で中心にあるぼかし距離の長さの色遷移を作成し、影の内側の半径の端点で完全な影の色からその外側の端点で完全に透明になるまでの範囲の色遷移を作成する必要があります。</blockquote> - </dd> - <dt id="spread-radius"><code><spread-radius></code></dt> - <dd>4 番目に指定された {{cssxref("<length>")}} の値。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は <code>0</code> と解釈され、影の大きさは要素の大きさと同じままとなります。</dd> - <dt id="color"><code><color></code></dt> - <dd>可能なキーワード及び記述方法については {{cssxref("<color>")}} の値をご覧ください。<br> - 値が指定されていない場合は、既定で {{cssxref("currentcolor")}} になります。</dd> -</dl> - -<h3 id="Interpolation" name="Interpolation">補間</h3> - -<p>リストの中 (<code>none</code> は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、及び (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし <code>inset</code> が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で <code>inset</code> と <code>inset</code> の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は <code>transparent</code> の色の影で補完し、すべての長さが <code>0</code> であり、 <code>inset</code> (の有無) が一致するものがあれば、より長いリストに一致します。</p> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +単一の box-shadow は次の物を使用して指定します。 + +- 2 ～ 4 つの [`<length>`](/ja/docs/Web/CSS/length) 値 + + - 値が 2 つだけ与えられた場合、 `<offset-x>` および `<offset-y>` として解釈されます。 + - 3 つ目の値が与えられた場合、 `<blur-radius>` として解釈されます。 + - 4 つ目の値が与えられた場合、 `<spread-radius>` として解釈されます。 + +- 任意で、 `inset` キーワード +- 任意で、 [`<color>`](#color) の値 + +複数の影を指定する場合は、影をカンマで区切ったリストを指定してください。 + +### 値 + +- `inset` + - : 指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。 + `inset` キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 `inset` な影は背景の上、境界や内容の下に描画されます。 +- `<offset-x>` `<offset-y>` + - : これらは 2 つの {{cssxref("<length>")}} 値で、影のオフセットを設定します。 `<offset-x>` は水平方向の距離を表します。負の値が指定された場合、影は左方向に配置されます。 `<offset-y>` は垂直方向の距離を表します。負の値が指定された場合、影は上方向に配置されます。利用可能な値の単位については {{cssxref("<length>")}} をご覧ください。 + どちらのオフセットも `0` である場合、影は要素の裏に配置されます。 (`<blur-radius>` や `<spread-radius>` が指定されている場合は、ぼかし効果を生成することができます。) +- `<blur-radius>` + + - : これは 3 つ目の {{cssxref("<length>")}} 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は `0` となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。 + + > …影の辺が長くまっすぐな場合、影の辺に垂直で中心にあるぼかし距離の長さの色遷移を作成し、影の内側の半径の端点で完全な影の色からその外側の端点で完全に透明になるまでの範囲の色遷移を作成する必要があります。 + +- `<spread-radius>` + - : 4 つ目に指定される {{cssxref("<length>")}} の値です。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は `0` と解釈され、影の大きさは要素の大きさと同じままとなります。 +- `<color>` + - : 可能なキーワード及び記述方法については {{cssxref("<color>")}} の値をご覧ください。 + 値が指定されていない場合は、既定で {{cssxref("<color>","currentColor","#currentcolor_keyword")}} になります。 + +### 補間 + +リストの中 (`none` は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、およびび (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし `inset` が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で `inset` と `inset` の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は `transparent` の色の影で補完し、すべての長さが `0` であり、 `inset` (の有無) が一致するものがあれば、より長いリストに一致します。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_three_shadows" name="Setting_three_shadows">3つの影の設定</h3> +<h3 id="Setting_three_shadows">3 つの影の設定</h3> -<p>この例では、3 つの影を使用しています。インセットシャドウ、通常のドロップシャドウ、境界の効果を生む 2px の影です (3 つ目の影の代わりに {{cssxref('outline')}} を使用することもできます)。</p> +この例では、3 つの影を使用しています。内部への影、通常のドロップシャドウ、境界の効果を生む 2px の影です (3 つ目の影の代わりに {{cssxref('outline')}} を使用することもできます)。 -<div id="Examples1"> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><blockquote><q>You may shoot me with your words,<br/> -You may cut me with your eyes,<br/> -You may kill me with your hatefulness,<br/> -But still, like air, I'll rise.</q> -<p>&mdash; Maya Angelou</p> -</blockquote></pre> +```html +<blockquote><q>You may shoot me with your words,<br/> +You may cut me with your eyes,<br/> +You may kill me with your hatefulness,<br/> +But still, like air, I'll rise.</q> +<p>— Maya Angelou</p> +</blockquote> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">blockquote { +```css +blockquote { padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); -}</pre> -</div> +} +``` -<p>{{EmbedLiveSample('Setting_three_shadows', '300', '300')}}</p> +#### 結果 -<h3 id="Setting_zero_for_offset_and_blur" name="Setting_zero_for_offset_and_blur">offset と blur をゼロに設定</h3> +{{EmbedLiveSample('Setting_three_shadows', '300', '300')}} -<div id="Examples2"> -<p><code>x-offset</code>, <code>y-offset</code>, <code>blur</code> がすべてゼロの場合、ボックスシャドウはすべての辺に同じ幅の単一色の囲み線になります。影は背後から手前にかけて描かれるため、最初の影はその後の影の最上位に表示されます。既定値通り、 <code>border-radius</code> が 0 に設定されていた場合、影の角は同様に尖った形になります。 <code>border-radius</code> にそれ以外の値を設定した場合、角は丸みを帯びます。。</p> +<h3 id="Setting_zero_for_offset_and_blur">offset と blur をゼロに設定</h3> -<p>影が隣接する要素と重ならないように、また、含まれるボックスの境界線を超えないように、最も広いボックスシャドウの寸法のマージンを追加しました。ボックスシャドウは<a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a>の寸法に影響を与えません。</p> +`x-offset`, `y-offset`, `blur` がすべてゼロの場合、ボックスシャドウはすべての辺に同じ幅の単一色の囲み線になります。影は背後から手前にかけて描かれるため、最初の影はその後の影の最上位に表示されます。既定値通り、 `border-radius` が 0 に設定されていた場合、影の角は同様に尖った形になります。 `border-radius` にそれ以外の値を設定した場合、角は丸みを帯びます。 -<h4 id="HTML_2">HTML</h4> +影が隣接する要素と重ならないように、また、包含ボックスの境界線を超えないように、最も広いボックスシャドウの寸法のマージンを追加しました。ボックスシャドウは[ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model)の寸法に影響を与えません。 -<pre class="brush: html notranslate"><div><p>Hello World</p></div></pre> +#### HTML -<h4 id="CSS_2">CSS</h4> +```html +<div><p>Hello World</p></div> +``` -<pre class="brush: css notranslate">p { +#### CSS + +```css +p { box-shadow: 0 0 0 2em #F4AAB9, 0 0 0 4em #66CCFF; margin: 4em; padding:1em; -}</pre> -</div> - -<p>{{EmbedLiveSample('Setting_zero_for_offset_and_blur', '300', '300')}}</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('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.box-shadow")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("<color>")}} データ型</li> - <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> - <li>{{cssxref("text-shadow")}}</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を用いた HTML 要素への色の適用</a></li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample('Setting_zero_for_offset_and_blur', '300', '300')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<color>")}} データ型 +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- {{cssxref("text-shadow")}} +- [CSS を用いた HTML 要素への色の適用](/ja/docs/Web/HTML/Applying_color) |
