From f1650fbb27022456d9fc3ff8cd4b5ec676ca3a2e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 12 Nov 2021 01:05:16 +0900 Subject: CSS Backgrounds and Borders 背景関係のプロパティの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/background-attachment/index.html | 151 -------------- files/ja/web/css/background-attachment/index.md | 151 ++++++++++++++ files/ja/web/css/background-clip/index.html | 135 ------------- files/ja/web/css/background-clip/index.md | 135 +++++++++++++ files/ja/web/css/background-color/index.html | 154 --------------- files/ja/web/css/background-color/index.md | 154 +++++++++++++++ files/ja/web/css/background-image/index.html | 167 ---------------- files/ja/web/css/background-image/index.md | 167 ++++++++++++++++ files/ja/web/css/background-origin/index.html | 110 ----------- files/ja/web/css/background-origin/index.md | 110 +++++++++++ files/ja/web/css/background-position-x/index.html | 104 ---------- files/ja/web/css/background-position-x/index.md | 104 ++++++++++ files/ja/web/css/background-position-y/index.html | 105 ---------- files/ja/web/css/background-position-y/index.md | 105 ++++++++++ files/ja/web/css/background-position/index.html | 229 --------------------- files/ja/web/css/background-position/index.md | 229 +++++++++++++++++++++ files/ja/web/css/background-repeat/index.html | 231 ---------------------- files/ja/web/css/background-repeat/index.md | 231 ++++++++++++++++++++++ files/ja/web/css/background-size/index.html | 193 ------------------ files/ja/web/css/background-size/index.md | 193 ++++++++++++++++++ files/ja/web/css/background/index.html | 172 ---------------- files/ja/web/css/background/index.md | 172 ++++++++++++++++ files/ja/web/css/box-shadow/index.html | 190 ------------------ files/ja/web/css/box-shadow/index.md | 190 ++++++++++++++++++ 24 files changed, 1941 insertions(+), 1941 deletions(-) delete mode 100644 files/ja/web/css/background-attachment/index.html create mode 100644 files/ja/web/css/background-attachment/index.md delete mode 100644 files/ja/web/css/background-clip/index.html create mode 100644 files/ja/web/css/background-clip/index.md delete mode 100644 files/ja/web/css/background-color/index.html create mode 100644 files/ja/web/css/background-color/index.md delete mode 100644 files/ja/web/css/background-image/index.html create mode 100644 files/ja/web/css/background-image/index.md delete mode 100644 files/ja/web/css/background-origin/index.html create mode 100644 files/ja/web/css/background-origin/index.md delete mode 100644 files/ja/web/css/background-position-x/index.html create mode 100644 files/ja/web/css/background-position-x/index.md delete mode 100644 files/ja/web/css/background-position-y/index.html create mode 100644 files/ja/web/css/background-position-y/index.md delete mode 100644 files/ja/web/css/background-position/index.html create mode 100644 files/ja/web/css/background-position/index.md delete mode 100644 files/ja/web/css/background-repeat/index.html create mode 100644 files/ja/web/css/background-repeat/index.md delete mode 100644 files/ja/web/css/background-size/index.html create mode 100644 files/ja/web/css/background-size/index.md delete mode 100644 files/ja/web/css/background/index.html create mode 100644 files/ja/web/css/background/index.md delete mode 100644 files/ja/web/css/box-shadow/index.html create mode 100644 files/ja/web/css/box-shadow/index.md diff --git a/files/ja/web/css/background-attachment/index.html b/files/ja/web/css/background-attachment/index.html deleted file mode 100644 index 230923fd03..0000000000 --- a/files/ja/web/css/background-attachment/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: background-attachment -slug: Web/CSS/background-attachment -tags: - - CSS - - CSS Background - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/background-attachment ---- -
{{CSSRef}}
- -

background-attachment は CSS のプロパティで、背景画像の位置を{{glossary("Viewport", "ビューポート")}}の中で固定するか、包含ブロックと一緒にスクロールするかを設定します。

- -
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
- - - -

構文

- -
/* キーワード値 */
-background-attachment: scroll;
-background-attachment: fixed;
-background-attachment: local;
-
-/* グローバル値 */
-background-attachment: inherit;
-background-attachment: initial;
-background-attachment: unset;
-
- -

background-attachment プロパティは、以下に挙げた値のうちの一つで指定します。

- -

値

- -
-
fixed
-
背景はビューポートに対する相対位置で固定されます。要素がスクロール機構を持っていたとしても、背景画像は要素とともには動きません。 (これは {{cssxref("background-clip", "background-clip: text", "#text")}} とは両立できません)
-
local
-
背景は要素の内容に対する相対位置で固定されます。要素がスクロール機構を持っていた場合、背景画像は要素の内容とともにスクロールします。背景画像の描画エリアと配置エリアは、それらを囲む境界ではなく、要素のスクロール可能なエリアを基準にします。
-
scroll
-
背景は要素自身に対する相対位置で固定され、内容と共にスクロールしません。 (要素の境界に対して効果的に張り付きます。)
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

単純な例

- -

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>
- -

CSS

- -
p {
-  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
-  background-attachment: fixed;
-}
-
- -

結果

- -

{{EmbedLiveSample("Simple_example")}}

- -

複数の背景画像

- -

このプロパティは複数の背景画像に対応しており、それぞれの背景画像に異なる <attachment> をカンマ区切りで指定できます。それぞれの画像には先頭から順番に <attachment> の値が適用されます。

- -

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.
-
-  Suddenly she came upon a little three-legged table, all made of solid
-  glass; there was nothing on it except a tiny golden key, and Alice's
-  first thought was that it might belong to one of the doors of the hall;
-  but, alas! either the locks were too large, or the key was too small,
-  but at any rate it would not open any of them. However, on the second
-  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>
- -

CSS

- -
p {
-  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
-      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
-  background-attachment: fixed, scroll;
-  background-repeat: no-repeat, repeat-y;
-}
- -

結果

- -

{{EmbedLiveSample("Multiple_background_images")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}複数の背景画像と local に対応するために一括指定プロパティを拡張。
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}重要な変更なし。
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}重要な変更なし。
- -

ブラウザーの互換性

- -

{{Compat("css.properties.background-attachment")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background-attachment/index.md b/files/ja/web/css/background-attachment/index.md new file mode 100644 index 0000000000..230923fd03 --- /dev/null +++ b/files/ja/web/css/background-attachment/index.md @@ -0,0 +1,151 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

background-attachment は CSS のプロパティで、背景画像の位置を{{glossary("Viewport", "ビューポート")}}の中で固定するか、包含ブロックと一緒にスクロールするかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* グローバル値 */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+
+ +

background-attachment プロパティは、以下に挙げた値のうちの一つで指定します。

+ +

値

+ +
+
fixed
+
背景はビューポートに対する相対位置で固定されます。要素がスクロール機構を持っていたとしても、背景画像は要素とともには動きません。 (これは {{cssxref("background-clip", "background-clip: text", "#text")}} とは両立できません)
+
local
+
背景は要素の内容に対する相対位置で固定されます。要素がスクロール機構を持っていた場合、背景画像は要素の内容とともにスクロールします。背景画像の描画エリアと配置エリアは、それらを囲む境界ではなく、要素のスクロール可能なエリアを基準にします。
+
scroll
+
背景は要素自身に対する相対位置で固定され、内容と共にスクロールしません。 (要素の境界に対して効果的に張り付きます。)
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

単純な例

+ +

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>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

複数の背景画像

+ +

このプロパティは複数の背景画像に対応しており、それぞれの背景画像に異なる <attachment> をカンマ区切りで指定できます。それぞれの画像には先頭から順番に <attachment> の値が適用されます。

+ +

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.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  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>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

結果

+ +

{{EmbedLiveSample("Multiple_background_images")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}複数の背景画像と local に対応するために一括指定プロパティを拡張。
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}重要な変更なし。
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}重要な変更なし。
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.background-attachment")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-clip/index.html b/files/ja/web/css/background-clip/index.html deleted file mode 100644 index 6c318174a8..0000000000 --- a/files/ja/web/css/background-clip/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: background-clip -slug: Web/CSS/background-clip -tags: - - CSS - - CSS Background - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/background-clip ---- -

{{CSSRef}}

- -

background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。

- -
{{EmbedInteractiveExample("pages/css/background-clip.html")}}
- - - -

要素に {{cssxref("background-image")}} または {{cssxref("background-color")}} がない場合、このプロパティは ({{cssxref("border-style")}} または {{cssxref("border-image")}} によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。

- -
-

注: ルート要素は異なる背景の描画領域を持っているため、その要素に background-clip プロパティが指定されても効果はありません。「特殊要素の背景」を参照してください。

-
- -
-

注: ルート要素が HTML 要素である文書の場合、ルート要素上の {{cssxref("background-image")}} の計算値が none であり、その {{cssxref("background-color")}} が transparent であると、ユーザーエージェントは代わりに、 {{cssxref("background")}} プロパティの計算値をその要素の HTML の {{HTMLElement("body")}} の子要素から伝搬させなければなりません。その <body> 要素の background プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 <body> 要素にキャンバスの背景を指定することを推奨します。

-
- -

構文

- -
/* キーワード値 */
-background-clip: border-box;
-background-clip: padding-box;
-background-clip: content-box;
-background-clip: text;
-
-/* グローバル値 */
-background-clip: inherit;
-background-clip: initial;
-background-clip: unset;
-
- -

値

- -
-
border-box
-
背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。
-
padding-box
-
背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。
-
content-box
-
背景をコンテンツボックスの中に (切り取って) 表示します。
-
text {{experimental_inline}}
-
背景を前景のテキストの中に (切り取って) 表示します。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p class="border-box">背景が境界の裏まで拡張されます。</p>
-<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p>
-<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p>
-<p class="text">背景が前景のテキストで切り取られます。</p>
-
- -

CSS

- -
p {
-  border: .8em darkviolet;
-  border-style: dotted double;
-  margin: 1em 0;
-  padding: 1.4em;
-  background: linear-gradient(60deg, red, yellow, red, yellow, red);
-  font: 900 1.2em sans-serif;
-  text-decoration: underline;
-}
-
-.border-box { background-clip: border-box; }
-.padding-box { background-clip: padding-box; }
-.content-box { background-clip: content-box; }
-
-.text {
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: rgba(0,0,0,.2);
-}
- -

結果

- -

{{EmbedLiveSample('Examples', 600, 580)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}初回定義
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}{{Spec2('CSS4 Backgrounds')}}text の値を追加。
- -

ブラウザーの互換性

- -

{{Compat("css.properties.background-clip")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background-clip/index.md b/files/ja/web/css/background-clip/index.md new file mode 100644 index 0000000000..6c318174a8 --- /dev/null +++ b/files/ja/web/css/background-clip/index.md @@ -0,0 +1,135 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-clip +--- +

{{CSSRef}}

+ +

background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-clip.html")}}
+ + + +

要素に {{cssxref("background-image")}} または {{cssxref("background-color")}} がない場合、このプロパティは ({{cssxref("border-style")}} または {{cssxref("border-image")}} によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。

+ +
+

注: ルート要素は異なる背景の描画領域を持っているため、その要素に background-clip プロパティが指定されても効果はありません。「特殊要素の背景」を参照してください。

+
+ +
+

注: ルート要素が HTML 要素である文書の場合、ルート要素上の {{cssxref("background-image")}} の計算値が none であり、その {{cssxref("background-color")}} が transparent であると、ユーザーエージェントは代わりに、 {{cssxref("background")}} プロパティの計算値をその要素の HTML の {{HTMLElement("body")}} の子要素から伝搬させなければなりません。その <body> 要素の background プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 <body> 要素にキャンバスの背景を指定することを推奨します。

+
+ +

構文

+ +
/* キーワード値 */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* グローバル値 */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+
+ +

値

+ +
+
border-box
+
背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。
+
padding-box
+
背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。
+
content-box
+
背景をコンテンツボックスの中に (切り取って) 表示します。
+
text {{experimental_inline}}
+
背景を前景のテキストの中に (切り取って) 表示します。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p class="border-box">背景が境界の裏まで拡張されます。</p>
+<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p>
+<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p>
+<p class="text">背景が前景のテキストで切り取られます。</p>
+
+ +

CSS

+ +
p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: rgba(0,0,0,.2);
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 600, 580)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}初回定義
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}{{Spec2('CSS4 Backgrounds')}}text の値を追加。
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.background-clip")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-color/index.html b/files/ja/web/css/background-color/index.html deleted file mode 100644 index 5126230136..0000000000 --- a/files/ja/web/css/background-color/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: background-color -slug: Web/CSS/background-color -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - グラフィック - - リファレンス - - レイアウト -translation_of: Web/CSS/background-color ---- -
{{CSSRef}}
- -

CSS の background-color プロパティは、要素の背景色を設定します。

- -
{{EmbedInteractiveExample("pages/css/background-color.html")}}
- - - -

構文

- -
/* キーワード値 */
-background-color: red;
-background-color: indigo;
-
-/* Hexadecimal value */
-background-color: #bbff00;    /* 不透過 */
-background-color: #11ffee00;  /* 完全透過 */
-background-color: #11ffeeff;  /* 不透過 */
-
-/* RGB 値 */
-background-color: rgb(255, 255, 128);        /* 不透過 */
-background-color: rgba(117, 190, 218, 0.5);  /* 50% 不透過 */
-
-/* HSL 値 */
-background-color: hsl(50, 33%, 25%);         /* 不透過 */
-background-color: hsla(50, 33%, 25%, 0.75);  /* 75% 不透過 */
-
-/* 特殊なキーワード値 */
-background-color: currentcolor;
-background-color: transparent;
-
-/* グローバル値 */
-background-color: inherit;
-background-color: initial;
-background-color: unset;
- -

background-color プロパティは単一の <color> 値で指定します。

- -

値

- -
-
{{cssxref("<color>")}}
-
背景の均等色 (uniform color) を表します。指定されていれば {{cssxref("background-image")}} の背後に描画されますが、画像に透明な部分があれば色が見えます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div class="exampleone">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="exampletwo">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="examplethree">
-  Lorem ipsum dolor sit amet, consectetuer
-</div>
- -

CSS

- -
.exampleone {
-  background-color: teal;
-  color: white;
-}
-
-.exampletwo {
-  background-color: rgb(153,102,153);
-  color: rgb(255,255,204);
-}
-
-.examplethree {
-  background-color: #777799;
-  color: #FFFFFF;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples", 200, 150)}}

- -

アクセシビリティの考慮事項

- -

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。

- -

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}形式上は transparent キーワードが削除されたが、 {{cssxref("<color>")}} の正規の値として組み入れられたため、変更なし。
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.background-color")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background-color/index.md b/files/ja/web/css/background-color/index.md new file mode 100644 index 0000000000..5126230136 --- /dev/null +++ b/files/ja/web/css/background-color/index.md @@ -0,0 +1,154 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - グラフィック + - リファレンス + - レイアウト +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

CSS の background-color プロパティは、要素の背景色を設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-color.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+background-color: red;
+background-color: indigo;
+
+/* Hexadecimal value */
+background-color: #bbff00;    /* 不透過 */
+background-color: #11ffee00;  /* 完全透過 */
+background-color: #11ffeeff;  /* 不透過 */
+
+/* RGB 値 */
+background-color: rgb(255, 255, 128);        /* 不透過 */
+background-color: rgba(117, 190, 218, 0.5);  /* 50% 不透過 */
+
+/* HSL 値 */
+background-color: hsl(50, 33%, 25%);         /* 不透過 */
+background-color: hsla(50, 33%, 25%, 0.75);  /* 75% 不透過 */
+
+/* 特殊なキーワード値 */
+background-color: currentcolor;
+background-color: transparent;
+
+/* グローバル値 */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+ +

background-color プロパティは単一の <color> 値で指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
背景の均等色 (uniform color) を表します。指定されていれば {{cssxref("background-image")}} の背後に描画されますが、画像に透明な部分があれば色が見えます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div class="exampleone">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", 200, 150)}}

+ +

アクセシビリティの考慮事項

+ +

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度の高さであることを確認することが重要です。

+ +

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}形式上は transparent キーワードが削除されたが、 {{cssxref("<color>")}} の正規の値として組み入れられたため、変更なし。
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.background-color")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-image/index.html b/files/ja/web/css/background-image/index.html deleted file mode 100644 index 9c2da47f92..0000000000 --- a/files/ja/web/css/background-image/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: background-image -slug: Web/CSS/background-image -tags: - - Background - - CSS - - CSS Background - - CSS Property - - CSS プロパティ - - CSS 背景と境界 - - Reference - - background-image - - 'recipe:css-property' - - リファレンス -translation_of: Web/CSS/background-image ---- -

{{CSSRef}}

- -

background-image は CSS のプロパティで、要素に1つ以上の背景画像を設定します。

- -
{{EmbedInteractiveExample("pages/css/background-image.html")}}
- - - -

画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

- -

要素の境界は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。

- -

指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を none 値であるかのように処理します。

- -
注: たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。
- -

構文

- -

それぞれの背景画像は、キーワード none または {{cssxref("<image>")}} 値として指定されます。

- -

複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。

- -
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');
- -

値

- -
-
none
-
画像を用いないことを表すキーワード。
-
<image>
-
表示する背景を指し示す {{cssxref("<image>")}}。複数の背景に対応している場合は、カンマ区切りで複数指定することができます。
-
- -

アクセシビリティの考慮

- -

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

背景画像の重ね合わせ

- -

星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。

- -

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>
- -

CSS

- -
p {
-  font-size: 1.5em;
-  color: #FE7F88;
-  background-image: none;
-  background-color: transparent;
-}
-
-div {
-  background-image:
-      url("https://mdn.mozillademos.org/files/6457/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");
-  background-color: transparent;
-}
-
- -

結果

- -

{{EmbedLiveSample('Layering_background_images')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}{{Spec2('CSS3 Backgrounds')}}CSS2 Revision 1 と比べ、プロパティが複数の背景と任意の {{cssxref("<image>")}} CSS データ型をサポートするよう拡張されました。
{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.1')}}CSS1 と比べ、画像が固有の寸法を持たない場合、持つ場合の取り扱い方が明記されました。
{{SpecName('CSS1', '#background-image', 'background-image')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -
{{Compat("css.properties.background-image")}}
- -

関連情報

- - diff --git a/files/ja/web/css/background-image/index.md b/files/ja/web/css/background-image/index.md new file mode 100644 index 0000000000..9c2da47f92 --- /dev/null +++ b/files/ja/web/css/background-image/index.md @@ -0,0 +1,167 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - Background + - CSS + - CSS Background + - CSS Property + - CSS プロパティ + - CSS 背景と境界 + - Reference + - background-image + - 'recipe:css-property' + - リファレンス +translation_of: Web/CSS/background-image +--- +

{{CSSRef}}

+ +

background-image は CSS のプロパティで、要素に1つ以上の背景画像を設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-image.html")}}
+ + + +

画像はお互いの上に積み重ねるコンテキストレイヤーに描画されます。最初に指定されたレイヤーが、ユーザーに対し最も手前にあるかのように描画されます。

+ +

要素の境界は背景画像よりも上、 {{cssxref("background-color")}} は背景画像より下に描画されます。画像がボックスとその境界に対し相対的にどう描画されるかは、 {{cssxref("background-clip")}} および {{cssxref("background-origin")}} プロパティによって定義されます。

+ +

指定された画像を描画することができない (例えば、指定された URI が指し示すファイルをロードできない) 場合、ブラウザーはその指定を none 値であるかのように処理します。

+ +
注: たとえ画像が不透明で通常は色が表示されないとしても、ウェブ開発者は常に {{cssxref("background-color")}} を指定すべきです。例えばネットワークが切断された場合など、もし画像が読み込めなかったときに、背景色がフォールバックとして使われます。
+ +

構文

+ +

それぞれの背景画像は、キーワード none または {{cssxref("<image>")}} 値として指定されます。

+ +

複数の背景画像を指定するには、複数の値をカンマで区切って指定してください。

+ +
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');
+ +

値

+ +
+
none
+
画像を用いないことを表すキーワード。
+
<image>
+
表示する背景を指し示す {{cssxref("<image>")}}。複数の背景に対応している場合は、カンマ区切りで複数指定することができます。
+
+ +

アクセシビリティの考慮

+ +

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

背景画像の重ね合わせ

+ +

星の画像は一部透過となっており、猫の画像の上に重ねられている点に注意してください。

+ +

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>
+ +

CSS

+ +
p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-image: none;
+  background-color: transparent;
+}
+
+div {
+  background-image:
+      url("https://mdn.mozillademos.org/files/6457/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");
+  background-color: transparent;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Layering_background_images')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}{{Spec2('CSS3 Backgrounds')}}CSS2 Revision 1 と比べ、プロパティが複数の背景と任意の {{cssxref("<image>")}} CSS データ型をサポートするよう拡張されました。
{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.1')}}CSS1 と比べ、画像が固有の寸法を持たない場合、持つ場合の取り扱い方が明記されました。
{{SpecName('CSS1', '#background-image', 'background-image')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +
{{Compat("css.properties.background-image")}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/background-origin/index.html b/files/ja/web/css/background-origin/index.html deleted file mode 100644 index 34ec2d7dee..0000000000 --- a/files/ja/web/css/background-origin/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: background-origin -slug: Web/CSS/background-origin -tags: - - Background - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - background-origin -translation_of: Web/CSS/background-origin ---- -
{{CSSRef}}
- -

CSS の background-origin プロパティは、背景配置領域を設定します。言い換えれば、 {{cssxref("background-image")}} プロパティで指定された画像の原点の位置を設定します。

- -
{{EmbedInteractiveExample("pages/css/background-origin.html")}}
- - - -

{{cssxref("background-attachment")}} が fixed のときは background-origin が無視されることに注意してください。

- -
メモ: {{cssxref("background")}} 一括指定プロパティは、該当する値を設定しなかった場合、このプロパティの値を初期値にリセットします。
- -

構文

- -
/* キーワード値 */
-background-origin: border-box;
-background-origin: padding-box;
-background-origin: content-box;
-
-/* グローバル値 */
-background-origin: inherit;
-background-origin: initial;
-background-origin: unset;
-
- -

background-origin プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

- -

値

- -
-
border-box
-
背景は境界ボックスからの相対位置になります。
-
padding-box
-
背景はパディングボックスからの相対位置になります。
-
content-box
-
背景はコンテンツボックスからの相対位置になります。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
.example {
-  border: 10px double;
-  padding: 10px;
-  background: url('image.jpg');
-  background-position: center left;
-  background-origin: content-box;
-}
-
- -
#example2 {
-  border: 4px solid black;
-  padding: 10px;
-  background: url('image.gif');
-  background-repeat: no-repeat;
-  background-origin: border-box;
-}
-
- -
div {
-  background-image: url('logo.jpg'), url('mainback.png'); /* 背景に二つの画像を適用 */
-  background-position: top right, 0px 0px;
-  background-origin: content-box, padding-box;
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.background-origin")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background-origin/index.md b/files/ja/web/css/background-origin/index.md new file mode 100644 index 0000000000..34ec2d7dee --- /dev/null +++ b/files/ja/web/css/background-origin/index.md @@ -0,0 +1,110 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - Background + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - background-origin +translation_of: Web/CSS/background-origin +--- +
{{CSSRef}}
+ +

CSS の background-origin プロパティは、背景配置領域を設定します。言い換えれば、 {{cssxref("background-image")}} プロパティで指定された画像の原点の位置を設定します。

+ +
{{EmbedInteractiveExample("pages/css/background-origin.html")}}
+ + + +

{{cssxref("background-attachment")}} が fixed のときは background-origin が無視されることに注意してください。

+ +
メモ: {{cssxref("background")}} 一括指定プロパティは、該当する値を設定しなかった場合、このプロパティの値を初期値にリセットします。
+ +

構文

+ +
/* キーワード値 */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* グローバル値 */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+
+ +

background-origin プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+ +

値

+ +
+
border-box
+
背景は境界ボックスからの相対位置になります。
+
padding-box
+
背景はパディングボックスからの相対位置になります。
+
content-box
+
背景はコンテンツボックスからの相対位置になります。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+
+ +
#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
+}
+
+ +
div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* 背景に二つの画像を適用 */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.background-origin")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-position-x/index.html b/files/ja/web/css/background-position-x/index.html deleted file mode 100644 index b277e8f79f..0000000000 --- a/files/ja/web/css/background-position-x/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: background-position-x -slug: Web/CSS/background-position-x -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Experimental - - Reference -translation_of: Web/CSS/background-position-x ---- -
{{CSSRef}}
- -

CSS の background-position-x プロパティは、各背景画像における水平の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。

- -
{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
- - - -

このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。

- -

構文

- -
/* キーワード値 */
-background-position-x: left;
-background-position-x: center;
-background-position-x: right;
-
-/* <percentage> 値 */
-background-position-x: 25%;
-
-/* <length> 値 */
-background-position-x: 0px;
-background-position-x: 1cm;
-background-position-x: 8em;
-
-/* 辺からの相対値 */
-background-position-x: right 3px;
-background-position-x: left 25%;
-
-/* 複数の値 */
-background-position-x: 0px, center;
-
-/* グローバル値 */
-background-position-x: inherit;
-background-position-x: initial;
-background-position-x: unset;
-
- -

background-position-x プロパティは、1つ以上の値をカンマで区切って指定します。

- -

値

- -
-
left
-
背景画像の左端を、背景位置レイヤーの左端に配置します。
-
center
-
背景画像を背景位置レイヤーの方向の中央に配置します。
-
right
-
背景画像の右端を、背景位置レイヤーの右端に配置します。
-
{{cssxref("<length>")}}
-
指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。
-
{{cssxref("<percentage>")}}
-
指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の右端が、コンテナーの右端の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.background-position-x")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background-position-x/index.md b/files/ja/web/css/background-position-x/index.md new file mode 100644 index 0000000000..b277e8f79f --- /dev/null +++ b/files/ja/web/css/background-position-x/index.md @@ -0,0 +1,104 @@ +--- +title: background-position-x +slug: Web/CSS/background-position-x +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Experimental + - Reference +translation_of: Web/CSS/background-position-x +--- +
{{CSSRef}}
+ +

CSS の background-position-x プロパティは、各背景画像における水平の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。

+ +
{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
+ + + +

このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。

+ +

構文

+ +
/* キーワード値 */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* <percentage> 値 */
+background-position-x: 25%;
+
+/* <length> 値 */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* 辺からの相対値 */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* 複数の値 */
+background-position-x: 0px, center;
+
+/* グローバル値 */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+
+ +

background-position-x プロパティは、1つ以上の値をカンマで区切って指定します。

+ +

値

+ +
+
left
+
背景画像の左端を、背景位置レイヤーの左端に配置します。
+
center
+
背景画像を背景位置レイヤーの方向の中央に配置します。
+
right
+
背景画像の右端を、背景位置レイヤーの右端に配置します。
+
{{cssxref("<length>")}}
+
指定された背景画像の左辺の、背景位置レイヤーの左辺からのオフセットです。 (ブラウザーによってはオフセットに右辺を割り当てることもできます)。
+
{{cssxref("<percentage>")}}
+
指定された背景画像の水平位置のオフセットで、コンテナーからの相対値です。 0% の値は背景画像の左端がコンテナーの左端の位置に配置されることを意味し、 100% の値は背景画像の右端が、コンテナーの右端の位置に配置されることを意味します。したがって、 50% の値では、背景画像を水平方向の中央に配置します。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.background-position-x")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-position-y/index.html b/files/ja/web/css/background-position-y/index.html deleted file mode 100644 index 440effe3b7..0000000000 --- a/files/ja/web/css/background-position-y/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: background-position-y -slug: Web/CSS/background-position-y -tags: - - CSS - - CSS Property - - CSS プロパティ - - CSS 背景と境界 - - Experimental - - Reference -translation_of: Web/CSS/background-position-y ---- -
{{CSSRef}}
- -

background-position-y は CSS のプロパティで、各背景画像における垂直の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。

- -
{{EmbedInteractiveExample("pages/css/background-position-y.html")}}
- - - -

このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。

- -

構文

- -
/* キーワード値 */
-background-position-y: top;
-background-position-y: center;
-background-position-y: bottom;
-
-/* <percentage> 値 */
-background-position-y: 25%;
-
-/* <length> 値 */
-background-position-y: 0px;
-background-position-y: 1cm;
-background-position-y: 8em;
-
-/* 辺からの相対値 */
-background-position-y: bottom 3px;
-background-position-y: bottom 10%;
-
-/* 複数の値 */
-background-position-y: 0px, center;
-
-/* グローバル値 */
-background-position-y: inherit;
-background-position-y: initial;
-background-position-y: unset;
-
- -

background-position-y プロパティは、1つ以上の値をコンマで区切って指定します。

- -

値

- -
-
top
-
背景画像の上端を、背景位置レイヤーの上端に合わせます。
-
center
-
背景画像を垂直方向の中央を、背景位置レイヤーの垂直方向の中央に合わせます。
-
bottom
-
背景画像の下端を、背景位置レイヤーの下端に合わせます。
-
{{cssxref("<length>")}}
-
指定された背景画像の垂直方向の辺の、対応する背景位置レイヤーの上側の垂直方向の辺を基準としたオフセットです。 (一部のブラウザーではオフセットの下辺に割り当てることができます。)
-
{{cssxref("<percentage>")}}
-
指定された背景画像のコンテナーに対する垂直方向の相対位置のオフセットです。0%の値は背景画像の上辺がコンテナーの上辺に配置されることを意味し、100%の値は背景画像の下辺がコンテナーの下辺に配置されることを意味しますので、50%の値は背景画像を垂直方向に中央揃えします。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}{{Spec2('CSS4 Backgrounds')}}長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.background-position-y")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background-position-y/index.md b/files/ja/web/css/background-position-y/index.md new file mode 100644 index 0000000000..440effe3b7 --- /dev/null +++ b/files/ja/web/css/background-position-y/index.md @@ -0,0 +1,105 @@ +--- +title: background-position-y +slug: Web/CSS/background-position-y +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS 背景と境界 + - Experimental + - Reference +translation_of: Web/CSS/background-position-y +--- +
{{CSSRef}}
+ +

background-position-y は CSS のプロパティで、各背景画像における垂直の初期位置を設定します。位置は {{cssxref("background-origin")}} によって設定された位置レイヤーに対する相対位置です。

+ +
{{EmbedInteractiveExample("pages/css/background-position-y.html")}}
+ + + +

このプロパティの値は、その後で一括指定の {{cssxref("background")}} または {{cssxref("background-position")}} プロパティが定義されると上書きされます。

+ +

構文

+ +
/* キーワード値 */
+background-position-y: top;
+background-position-y: center;
+background-position-y: bottom;
+
+/* <percentage> 値 */
+background-position-y: 25%;
+
+/* <length> 値 */
+background-position-y: 0px;
+background-position-y: 1cm;
+background-position-y: 8em;
+
+/* 辺からの相対値 */
+background-position-y: bottom 3px;
+background-position-y: bottom 10%;
+
+/* 複数の値 */
+background-position-y: 0px, center;
+
+/* グローバル値 */
+background-position-y: inherit;
+background-position-y: initial;
+background-position-y: unset;
+
+ +

background-position-y プロパティは、1つ以上の値をコンマで区切って指定します。

+ +

値

+ +
+
top
+
背景画像の上端を、背景位置レイヤーの上端に合わせます。
+
center
+
背景画像を垂直方向の中央を、背景位置レイヤーの垂直方向の中央に合わせます。
+
bottom
+
背景画像の下端を、背景位置レイヤーの下端に合わせます。
+
{{cssxref("<length>")}}
+
指定された背景画像の垂直方向の辺の、対応する背景位置レイヤーの上側の垂直方向の辺を基準としたオフセットです。 (一部のブラウザーではオフセットの下辺に割り当てることができます。)
+
{{cssxref("<percentage>")}}
+
指定された背景画像のコンテナーに対する垂直方向の相対位置のオフセットです。0%の値は背景画像の上辺がコンテナーの上辺に配置されることを意味し、100%の値は背景画像の下辺がコンテナーの下辺に配置されることを意味しますので、50%の値は背景画像を垂直方向に中央揃えします。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}{{Spec2('CSS4 Backgrounds')}}長年の実装に合わせるため、 {{cssxref("background-position")}} の個別指定サブプロパティを初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.background-position-y")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-position/index.html b/files/ja/web/css/background-position/index.html deleted file mode 100644 index 2b43fb1e6c..0000000000 --- a/files/ja/web/css/background-position/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: background-position -slug: Web/CSS/background-position -tags: - - CSS - - CSS Background - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/background-position ---- -
{{CSSRef}}
- -

background-position は CSS のプロパティで、それぞれの背景画像の初期位置を設定します。位置は {{cssxref("background-origin")}} で設定された位置レイヤーからの相対です。

- -
{{EmbedInteractiveExample("pages/css/background-position.html")}}
- - - -

構文

- -
/* キーワード値 */
-background-position: top;
-background-position: bottom;
-background-position: left;
-background-position: right;
-background-position: center;
-
-/* <percentage> 値 */
-background-position: 25% 75%;
-
-/* <length> 値 */
-background-position: 0 0;
-background-position: 1cm 2cm;
-background-position: 10ch 8em;
-
-/* 複数の画像 */
-background-position: 0 0, center;
-
-/* 辺からのオフセット値 */
-background-position: bottom 10px right 20px;
-background-position: right 3em bottom 10px;
-background-position: bottom 10px right;
-background-position: top right 10px;
-
-/* グローバル値 */
-background-position: inherit;
-background-position: initial;
-background-position: unset;
-
- -

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}} - -

例

- -

背景画像の位置指定

- -

以下の3つの例は、 {{cssxref("background")}} を使って黄色い四角形の要素とその中に星の画像を作成します。それぞれの例で、星は異なる位置にあります。加えて、3番目の例では1つの要素内にある2つの異なる背景画像の位置を指定する方法を示しています。

- -

HTML

- -
<div class="exampleone">Example One</div>
-<div class="exampletwo">Example Two</div>
-<div class="examplethree">Example Three</div>
- -

CSS

- -
/* すべての <div> で共有される */
-div {
-  background-color: #FFEE99;
-  background-repeat: no-repeat;
-  width: 300px;
-  height: 80px;
-  margin-bottom: 12px;
-}
-
-/* これらの例は background 一括指定プロパティを使用しています */
-.exampleone {
-  background: url("https://mdn.mozillademos.org/files/11987/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;
-}
-
-/* 複数の背景画像: 各画像は対応する位置スタイルに、
-   最初に指定されたものから順に対応付けられます。 */
-.examplethree {
-  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
-                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
-  background-position: 0px 0px,
-                       right 3em bottom 2em;
-}
- -

結果

- -

{{EmbedLiveSample('Positioning_background_images', 420, 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}{{Spec2('CSS3 Backgrounds')}}複数の背景のサポートを追加。4個の値を持つ構文、実装に一致するように割合の定義を調整。
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}{{Spec2('CSS2.1')}}キーワード値と {{cssxref("<length>")}} および {{cssxref("<percentage>")}} の値の混合指定を許容。
{{SpecName('CSS1', '#background-position', 'background-position')}}{{Spec2('CSS1')}}初回定義。
- -

ブラウザーの互換性

- -

{{Compat("css.properties.background-position")}}

- -

Quantum CSS のメモ

- - - -

関連情報

- - diff --git a/files/ja/web/css/background-position/index.md b/files/ja/web/css/background-position/index.md new file mode 100644 index 0000000000..2b43fb1e6c --- /dev/null +++ b/files/ja/web/css/background-position/index.md @@ -0,0 +1,229 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-position +--- +
{{CSSRef}}
+ +

background-position は CSS のプロパティで、それぞれの背景画像の初期位置を設定します。位置は {{cssxref("background-origin")}} で設定された位置レイヤーからの相対です。

+ +
{{EmbedInteractiveExample("pages/css/background-position.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* <percentage> 値 */
+background-position: 25% 75%;
+
+/* <length> 値 */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* 複数の画像 */
+background-position: 0 0, center;
+
+/* 辺からのオフセット値 */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* グローバル値 */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+
+ +

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}} + +

例

+ +

背景画像の位置指定

+ +

以下の3つの例は、 {{cssxref("background")}} を使って黄色い四角形の要素とその中に星の画像を作成します。それぞれの例で、星は異なる位置にあります。加えて、3番目の例では1つの要素内にある2つの異なる背景画像の位置を指定する方法を示しています。

+ +

HTML

+ +
<div class="exampleone">Example One</div>
+<div class="exampletwo">Example Two</div>
+<div class="examplethree">Example Three</div>
+ +

CSS

+ +
/* すべての <div> で共有される */
+div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* これらの例は background 一括指定プロパティを使用しています */
+.exampleone {
+  background: url("https://mdn.mozillademos.org/files/11987/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;
+}
+
+/* 複数の背景画像: 各画像は対応する位置スタイルに、
+   最初に指定されたものから順に対応付けられます。 */
+.examplethree {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       right 3em bottom 2em;
+}
+ +

結果

+ +

{{EmbedLiveSample('Positioning_background_images', 420, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}{{Spec2('CSS3 Backgrounds')}}複数の背景のサポートを追加。4個の値を持つ構文、実装に一致するように割合の定義を調整。
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}{{Spec2('CSS2.1')}}キーワード値と {{cssxref("<length>")}} および {{cssxref("<percentage>")}} の値の混合指定を許容。
{{SpecName('CSS1', '#background-position', 'background-position')}}{{Spec2('CSS1')}}初回定義。
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.background-position")}}

+ +

Quantum CSS のメモ

+ + + +

関連情報

+ + diff --git a/files/ja/web/css/background-repeat/index.html b/files/ja/web/css/background-repeat/index.html deleted file mode 100644 index 216cebb980..0000000000 --- a/files/ja/web/css/background-repeat/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: background-repeat -slug: Web/CSS/background-repeat -tags: - - Background - - CSS - - CSS プロパティ - - CSS 背景と境界 - - background-repeat - - リファレンス -translation_of: Web/CSS/background-repeat ---- -
{{CSSRef}}
- -

CSS の background-repeat プロパティは、背景画像をどのように繰り返すかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく繰り返さないようにしたりすることができます。

- -
{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
- - - -

既定では、繰り返された画像が要素のサイズによって切り取られます。他にも、背景画像のリサイズを伴う方法 (round を使用) や、背景画像間にスペースを挿入する方法 (space を使用) など、別の敷き詰め方法を選択することも可能です。

- -

構文

- -
/* キーワード値 */
-background-repeat: repeat-x;
-background-repeat: repeat-y;
-background-repeat: repeat;
-background-repeat: space;
-background-repeat: round;
-background-repeat: no-repeat;
-
-/* 値2つの構文: 水平方向 | 垂直方向 */
-background-repeat: repeat space;
-background-repeat: repeat repeat;
-background-repeat: round space;
-background-repeat: no-repeat round;
-
-/* グローバル値 */
-background-repeat: inherit;
-background-repeat: initial;
-background-repeat: unset;
-
- -

値

- -
-
<repeat-style>
-
値1つの構文は完全な値2つの構文に対する一括指定です。
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
単一の値対応するペアの値
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
- 値 2 つの構文では、最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。以下は各値が各方向にどう働くかの説明です:
-
- - - - - - - - - - - - - - - - - - - -
repeat画像は描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は切り取られます。
space画像は指定された方向に切り抜きなしで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。{{cssxref("background-position")}} プロパティは、画像を 1 つしか切り抜きなしで敷き詰められない場合を除き、無視されます。space を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。
round利用できる空間が広がるにつれ、繰り返し描画された画像は、画像をもう1つ追加するだけの余裕 (残りの空間 ≧ 画像の幅の半分) ができるまで、 (隙間を空けずに) 伸長されます。次の画像が追加されると、描画されたすべての画像が収まるように縮小されます。例えば、元々の幅が 260px の画像が3回繰り返されているとき、それぞれが幅 300px になるまで伸長され、それから画像がもう1つ追加されます。そのときそれぞれは 225px に縮小されます。
no-repeat画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は {{cssxref("background-position")}} CSS プロパティで定義されます。
-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -
/* 例のすべての div で共通 */
-ol,
-li {
-  margin: 0;
-  padding: 0;
-}
-li {
-  margin-bottom: 12px;
-}
-div {
-    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
-    width: 160px;
-    height: 70px;
-}
-
-/* 背景の繰り返し */
-.one {
-  background-repeat: no-repeat;
-}
-.two {
-  background-repeat: repeat;
-}
-.three {
-  background-repeat: repeat-x;
-}
-.four {
-  background-repeat: repeat-y;
-}
-.five {
-  background-repeat: space;
-}
-.six {
-  background-repeat: round;
-}
-
-/* 複数の画像 */
-.seven {
-  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
-                     url(https://developer.mozilla.org/static/img/favicon32.png);
-  background-repeat: repeat-x,
-                     repeat-y;
-  height: 144px;
-}
- -

結果

- -

この例では、リストの各要素に background-repeat の異なる値が対応付けられています。

- -

{{EmbedLiveSample('Examples', 240, 560)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}複数の背景画像、水平・垂直方向にそれぞれ別の繰り返し方法を指定できる値 2 つの構文、space と round キーワード、および背景描画領域を明確に定義したことによる、インラインレベル要素に対する背景のサポートの追加。
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}特筆すべき変更点はなし
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.background-repeat", "background-repeat")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background-repeat/index.md b/files/ja/web/css/background-repeat/index.md new file mode 100644 index 0000000000..216cebb980 --- /dev/null +++ b/files/ja/web/css/background-repeat/index.md @@ -0,0 +1,231 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - Background + - CSS + - CSS プロパティ + - CSS 背景と境界 + - background-repeat + - リファレンス +translation_of: Web/CSS/background-repeat +--- +
{{CSSRef}}
+ +

CSS の background-repeat プロパティは、背景画像をどのように繰り返すかを設定します。背景画像は水平軸方向と垂直軸方向に繰り返したり、まったく繰り返さないようにしたりすることができます。

+ +
{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
+ + + +

既定では、繰り返された画像が要素のサイズによって切り取られます。他にも、背景画像のリサイズを伴う方法 (round を使用) や、背景画像間にスペースを挿入する方法 (space を使用) など、別の敷き詰め方法を選択することも可能です。

+ +

構文

+ +
/* キーワード値 */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* 値2つの構文: 水平方向 | 垂直方向 */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* グローバル値 */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+
+ +

値

+ +
+
<repeat-style>
+
値1つの構文は完全な値2つの構文に対する一括指定です。
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
単一の値対応するペアの値
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ 値 2 つの構文では、最初の値は水平方向の繰り返しの振る舞いを表し、2 つ目の値は垂直方向の振る舞いを表します。以下は各値が各方向にどう働くかの説明です:
+
+ + + + + + + + + + + + + + + + + + + +
repeat画像は描画領域全体を覆うのに必要な回数だけ、繰り返し描画されます。最後の背景画像が領域に収まりきらない場合は切り取られます。
space画像は指定された方向に切り抜きなしで敷き詰められる回数だけ繰り返されます。最初の画像と最後の画像は領域の両端にそれぞれ接触するように描画され、余白が画像同士の間に均一に分配されます。{{cssxref("background-position")}} プロパティは、画像を 1 つしか切り抜きなしで敷き詰められない場合を除き、無視されます。space を使用していて背景画像が切り抜かれるのは、領域幅を超える背景画像が指定された場合のみです。
round利用できる空間が広がるにつれ、繰り返し描画された画像は、画像をもう1つ追加するだけの余裕 (残りの空間 ≧ 画像の幅の半分) ができるまで、 (隙間を空けずに) 伸長されます。次の画像が追加されると、描画されたすべての画像が収まるように縮小されます。例えば、元々の幅が 260px の画像が3回繰り返されているとき、それぞれが幅 300px になるまで伸長され、それから画像がもう1つ追加されます。そのときそれぞれは 225px に縮小されます。
no-repeat画像は繰り返し描画されません (したがって背景画像描画領域が完全に埋め尽くされるとは限りません)。背景画像の位置は {{cssxref("background-position")}} CSS プロパティで定義されます。
+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +
/* 例のすべての div で共通 */
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* 背景の繰り返し */
+.one {
+  background-repeat: no-repeat;
+}
+.two {
+  background-repeat: repeat;
+}
+.three {
+  background-repeat: repeat-x;
+}
+.four {
+  background-repeat: repeat-y;
+}
+.five {
+  background-repeat: space;
+}
+.six {
+  background-repeat: round;
+}
+
+/* 複数の画像 */
+.seven {
+  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                     url(https://developer.mozilla.org/static/img/favicon32.png);
+  background-repeat: repeat-x,
+                     repeat-y;
+  height: 144px;
+}
+ +

結果

+ +

この例では、リストの各要素に background-repeat の異なる値が対応付けられています。

+ +

{{EmbedLiveSample('Examples', 240, 560)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}複数の背景画像、水平・垂直方向にそれぞれ別の繰り返し方法を指定できる値 2 つの構文、space と round キーワード、および背景描画領域を明確に定義したことによる、インラインレベル要素に対する背景のサポートの追加。
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}特筆すべき変更点はなし
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.background-repeat", "background-repeat")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background-size/index.html b/files/ja/web/css/background-size/index.html deleted file mode 100644 index ee81417c6b..0000000000 --- a/files/ja/web/css/background-size/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: background-size -slug: Web/CSS/background-size -tags: - - Background - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - background-size -translation_of: Web/CSS/background-size ---- -
{{CSSRef}}
- -

background-size は CSS のプロパティで、要素の背景画像の寸法を設定します。画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。

- -
{{EmbedInteractiveExample("pages/css/background-size.html")}}
- - - -

背景画像に覆われていない領域は {{cssxref("background-color")}} プロパティで埋められ、背景画像の後ろに見える背景色は透過性があります。

- -

構文

- -
/* キーワード値 */
-background-size: cover;
-background-size: contain;
-
-/* 値1つの構文 */
-/* 画像の幅 (高さは 'auto' になる) */
-background-size: 50%;
-background-size: 3.2em;
-background-size: 12px;
-background-size: auto;
-
-/* 値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: 50%, 25%, 25%;
-background-size: 6px, auto, contain;
-
-/* グローバル値 */
-background-size: inherit;
-background-size: initial;
-background-size: unset;
-
- -

background-size プロパティは以下のいずれか1つの方法で指定します。

- - - -

複数の背景画像の寸法を指定するには、それぞれの値をカンマで区切ってください。

- -

値

- -
-
contain
-
画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。
-
cover
-
画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。
-
auto
-
縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。
-
{{cssxref("<length>")}}
-
その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。
-
{{cssxref("<percentage>")}}
-
その軸が背景配置領域の指定された割合になるよう拡大縮小します。背景配置領域とは、 {{cssxref("background-origin")}} の値（既定ではパディングボックス）によって定められます。しかし、背景の {{cssxref("background-attachment")}} の値が fixed の場合、配置領域は{{glossary("viewport", "ビューポート")}}全体となります。負の値は使用できません。
-
- -

固有の軸と比率

- -

値の計算は画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。属性は以下の通りです。

- - - -
-

メモ: <gradient> の振る舞いは Gecko 8.0 {{geckoRelease("8.0")}} で変更されました。それより前は、固有の寸法がないものの、背景配置領域と同じ比率の画像として扱われていました。

-
- -
-

メモ: Gecko では、 {{cssxref("element()")}} 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な固有の比率を持ちます。これは非標準の振る舞いです。

-
- -

固有の寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。

- -
-
background-size の幅と高さがともに定義されていて auto でない場合
-
背景画像は指定の寸法で描画されます。
-
background-size が contain または cover の場合
-
固有の比率を維持するため、画像は背景配置領域の中に収まるか、背景配置領域を覆うように描画されます。画像が固有の比率を持たない場合は、背景配置領域の寸法で描画されます。
-
background-size が auto または auto auto の場合
-
-
    -
  • 画像に水平および垂直の固有の寸法がある場合は、その寸法で描画されます。
    • -
  • 画像に固有の寸法も固有の比率もない場合は、背景配置領域の寸法で描画されます。
    • -
  • 画像に固有の寸法はない物の固有の比率がある場合は、 contain が指定された場合のように描画されます。
    • -
  • 画像に一方だけ固有の寸法があり、固有の比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と固有の比率を使用して計算されます。
    • -
  • 画像に一方だけ固有の寸法があり、固有の比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。
    • -
-
-
-
メモ: SVG 画像には preserveAspectRatio 属性があり、既定では contain と同等です。 Firefox 43 では、 Chrome 52 とは対照的に、明確に background-size が設定されると preserveAspectRatio が無視されます。
-
-
background-size の一方が auto でもう一方が auto ではない場合
-
-
    -
  • 画像に固有の比率がある場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は指定された寸法と固有の比率を使用して計算されます。
    • -
  • 画像に固有の比率がない場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような固有の寸法がない場合、背景配置領域の適切な寸法になります。
    • -
-
-
- -
-

メモ: 固有の寸法や比率を持たないベクター画像の背景の拡大縮小は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。

-
- -

形式文法

- -{{csssyntax}} - -

例

- -

例については Scaling background images を参照してください。

- -

メモ

- -

背景としてグラデーションを定義し、background-size をそれにあわせて定義した場合には、単独の auto を使うサイズを指定しないか、width 値だけを使って定義するのがよいでしょう (例えば background-size: 50%)。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ CSS3 の background-size 仕様 や CSS3 の Image Values gradient 仕様 に完全準拠した描画方式をすべて実装していない他ブラウザと、たいていは一致しません。

- -
.gradient-example {
-  width: 50px;
-  height: 100px;
-  background-image: linear-gradient(blue, red);
-
-  /* 利用が安全ではない */
-  background-size: 25px;
-  background-size: 50%;
-  background-size: auto 50px;
-  background-size: auto 50%;
-
-  /* 利用可能 */
-  background-size: 25px 50px;
-  background-size: 50% 50%;
-}
-
- -

なお、 <gradient> に対してピクセルの寸法と auto を利用することは推奨されません。 Firefox の 8 より前と、 Firefox 8 のレンダリングを実装していないブラウザーでは、背景が指定されている要素の正確な寸法が分からないと、レンダリングできないからです。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.background-size")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background-size/index.md b/files/ja/web/css/background-size/index.md new file mode 100644 index 0000000000..ee81417c6b --- /dev/null +++ b/files/ja/web/css/background-size/index.md @@ -0,0 +1,193 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - Background + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - background-size +translation_of: Web/CSS/background-size +--- +
{{CSSRef}}
+ +

background-size は CSS のプロパティで、要素の背景画像の寸法を設定します。画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。

+ +
{{EmbedInteractiveExample("pages/css/background-size.html")}}
+ + + +

背景画像に覆われていない領域は {{cssxref("background-color")}} プロパティで埋められ、背景画像の後ろに見える背景色は透過性があります。

+ +

構文

+ +
/* キーワード値 */
+background-size: cover;
+background-size: contain;
+
+/* 値1つの構文 */
+/* 画像の幅 (高さは 'auto' になる) */
+background-size: 50%;
+background-size: 3.2em;
+background-size: 12px;
+background-size: auto;
+
+/* 値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: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* グローバル値 */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+
+ +

background-size プロパティは以下のいずれか1つの方法で指定します。

+ + + +

複数の背景画像の寸法を指定するには、それぞれの値をカンマで区切ってください。

+ +

値

+ +
+
contain
+
画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。
+
cover
+
画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。
+
auto
+
縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。
+
{{cssxref("<length>")}}
+
その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。
+
{{cssxref("<percentage>")}}
+
その軸が背景配置領域の指定された割合になるよう拡大縮小します。背景配置領域とは、 {{cssxref("background-origin")}} の値（既定ではパディングボックス）によって定められます。しかし、背景の {{cssxref("background-attachment")}} の値が fixed の場合、配置領域は{{glossary("viewport", "ビューポート")}}全体となります。負の値は使用できません。
+
+ +

固有の軸と比率

+ +

値の計算は画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。属性は以下の通りです。

+ + + +
+

メモ: <gradient> の振る舞いは Gecko 8.0 {{geckoRelease("8.0")}} で変更されました。それより前は、固有の寸法がないものの、背景配置領域と同じ比率の画像として扱われていました。

+
+ +
+

メモ: Gecko では、 {{cssxref("element()")}} 関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な固有の比率を持ちます。これは非標準の振る舞いです。

+
+ +

固有の寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。

+ +
+
background-size の幅と高さがともに定義されていて auto でない場合
+
背景画像は指定の寸法で描画されます。
+
background-size が contain または cover の場合
+
固有の比率を維持するため、画像は背景配置領域の中に収まるか、背景配置領域を覆うように描画されます。画像が固有の比率を持たない場合は、背景配置領域の寸法で描画されます。
+
background-size が auto または auto auto の場合
+
+
    +
  • 画像に水平および垂直の固有の寸法がある場合は、その寸法で描画されます。
    • +
  • 画像に固有の寸法も固有の比率もない場合は、背景配置領域の寸法で描画されます。
    • +
  • 画像に固有の寸法はない物の固有の比率がある場合は、 contain が指定された場合のように描画されます。
    • +
  • 画像に一方だけ固有の寸法があり、固有の比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と固有の比率を使用して計算されます。
    • +
  • 画像に一方だけ固有の寸法があり、固有の比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。
    • +
+
+
+
メモ: SVG 画像には preserveAspectRatio 属性があり、既定では contain と同等です。 Firefox 43 では、 Chrome 52 とは対照的に、明確に background-size が設定されると preserveAspectRatio が無視されます。
+
+
background-size の一方が auto でもう一方が auto ではない場合
+
+
    +
  • 画像に固有の比率がある場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は指定された寸法と固有の比率を使用して計算されます。
    • +
  • 画像に固有の比率がない場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような固有の寸法がない場合、背景配置領域の適切な寸法になります。
    • +
+
+
+ +
+

メモ: 固有の寸法や比率を持たないベクター画像の背景の拡大縮小は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。

+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

例については Scaling background images を参照してください。

+ +

メモ

+ +

背景としてグラデーションを定義し、background-size をそれにあわせて定義した場合には、単独の auto を使うサイズを指定しないか、width 値だけを使って定義するのがよいでしょう (例えば background-size: 50%)。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ CSS3 の background-size 仕様 や CSS3 の Image Values gradient 仕様 に完全準拠した描画方式をすべて実装していない他ブラウザと、たいていは一致しません。

+ +
.gradient-example {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* 利用が安全ではない */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
+
+  /* 利用可能 */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
+}
+
+ +

なお、 <gradient> に対してピクセルの寸法と auto を利用することは推奨されません。 Firefox の 8 より前と、 Firefox 8 のレンダリングを実装していないブラウザーでは、背景が指定されている要素の正確な寸法が分からないと、レンダリングできないからです。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.background-size")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/background/index.html b/files/ja/web/css/background/index.html deleted file mode 100644 index 49207bfa58..0000000000 --- a/files/ja/web/css/background/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: background -slug: Web/CSS/background -tags: - - CSS - - CSS Background - - CSS Property - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/background ---- -

{{CSSRef("CSS Background")}}

- -

background は CSS の一括指定プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。

- -
{{EmbedInteractiveExample("pages/css/background.html")}}
- - - -

構成要素のプロパティ

- -

このプロパティは以下の CSS プロパティの一括指定です。

- - - -

構文

- -
/* <background-color> を使用 */
-background: green;
-
-/* <bg-image> と <repeat-style> を使用 */
-background: url("test.jpg") repeat-y;
-
-/* <box> と <background-color> を使用 */
-background: border-box red;
-
-/* 単一の画像、中央寄せかつ縮小 */
-background: no-repeat center/80% url("../img/image.png");
-
- -

background プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。

- -

それぞれのレイヤーの構文は以下の通りです。

- - - -

値

- -
-
<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")}} を参照。
-
- -

アクセシビリティの考慮

- -

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

色キーワードと画像による背景の設定

- -

HTML

- -
<p class="topbanner">
-  Starry sky<br/>
-  Twinkle twinkle<br/>
-  Starry sky
-</p>
-<p class="warning">Here is a paragraph<p>
- -

CSS

- -
.warning {
-  background: pink;
-}
-
-.topbanner {
-  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
-}
-
- -

結果

- -

{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}一括指定プロパティが拡張され、複数の背景と新しい {{cssxref("background-size")}}, {{cssxref("background-origin")}}, {{cssxref("background-clip")}} プロパティに対応した。
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}重要な変更なし
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.background")}}

- -

関連情報

- - diff --git a/files/ja/web/css/background/index.md b/files/ja/web/css/background/index.md new file mode 100644 index 0000000000..49207bfa58 --- /dev/null +++ b/files/ja/web/css/background/index.md @@ -0,0 +1,172 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/background +--- +

{{CSSRef("CSS Background")}}

+ +

background は CSS の一括指定プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。

+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ + + +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ + + +

構文

+ +
/* <background-color> を使用 */
+background: green;
+
+/* <bg-image> と <repeat-style> を使用 */
+background: url("test.jpg") repeat-y;
+
+/* <box> と <background-color> を使用 */
+background: border-box red;
+
+/* 単一の画像、中央寄せかつ縮小 */
+background: no-repeat center/80% url("../img/image.png");
+
+ +

background プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。

+ +

それぞれのレイヤーの構文は以下の通りです。

+ + + +

値

+ +
+
<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")}} を参照。
+
+ +

アクセシビリティの考慮

+ +

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

色キーワードと画像による背景の設定

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: pink;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}一括指定プロパティが拡張され、複数の背景と新しい {{cssxref("background-size")}}, {{cssxref("background-origin")}}, {{cssxref("background-clip")}} プロパティに対応した。
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}重要な変更なし
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.background")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/box-shadow/index.html b/files/ja/web/css/box-shadow/index.html deleted file mode 100644 index c33f487fb6..0000000000 --- a/files/ja/web/css/box-shadow/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: box-shadow -slug: Web/CSS/box-shadow -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Property - - CSS Styles - - CSS スタイル - - CSS プロパティ - - CSS 背景と境界 - - HTML Colors - - Reference - - Shadows - - Styles - - Styling HTML - - box-shadow - - 'recipe:css-property' - - 影 -translation_of: Web/CSS/box-shadow ---- -
{{CSSRef}}
- -

box-shadow は CSS のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。

- -
{{EmbedInteractiveExample("pages/css/box-shadow.html")}}
- - - -

box-shadow プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数のテキストの影の場合と同様になります (最初に指定された影が最も手前に来ます)。

- -

ボックスの影作成ツールは、 box-shadow を対話的に作成できるツールです。

- -

構文

- -
/* キーワード値 */
-box-shadow: none;
-
-/* offset-x | offset-y | color */
-box-shadow: 60px -16px teal;
-
-/* offset-x | offset-y | blur-radius | color */
-box-shadow: 10px 5px 5px black;
-
-/* offset-x | offset-y | blur-radius | spread-radius | color */
-box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
-
-/* inset | offset-x | offset-y | color */
-box-shadow: inset 5em 1em gold;
-
-/* 複数の影はカンマで区切る */
-box-shadow: 3px 3px red, -1em 0 0.4em olive;
-
-/* グローバルキーワード */
-box-shadow: inherit;
-box-shadow: initial;
-box-shadow: unset;
-
- -

単一の box-shadow の使用を指定してみます。

- - - -

複数の影を指定するには、影をカンマで区切ったリストを提供します。

- -

値

- -
-
inset
-
指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。
- inset キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 inset な影は背景の上、境界や内容の下に描画されます。
-
<offset-x> <offset-y>
-
これら２つの {{cssxref("<length>")}} 値は、影のオフセットを設定します。 <offset-x> は水平方向の距離を表します。負の値が指定された場合、影は左方向に延びます。 <offset-y> は垂直方向の距離を表します。負の値が指定された場合、影は上方向に延びます。利用可能な値の単位については {{cssxref("<length>")}} をご覧ください。
- どちらのオフセットも 0 である場合、影は要素の裏に配置されます。 (<blur-radius> や <spread-radius> が指定されている場合は、ぼかし効果が与えられるでしょう。)
-
<blur-radius>
-
これは３番目の {{cssxref("<length>")}} 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は 0 となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。
-
-
…影の辺が長くまっすぐな場合、影の辺に垂直で中心にあるぼかし距離の長さの色遷移を作成し、影の内側の半径の端点で完全な影の色からその外側の端点で完全に透明になるまでの範囲の色遷移を作成する必要があります。
-
-
<spread-radius>
-
4 番目に指定された {{cssxref("<length>")}} の値。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は 0 と解釈され、影の大きさは要素の大きさと同じままとなります。
-
<color>
-
可能なキーワード及び記述方法については {{cssxref("<color>")}} の値をご覧ください。
- 値が指定されていない場合は、既定で {{cssxref("currentcolor")}} になります。
-
- -

補間

- -

リストの中 (none は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、及び (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし inset が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で inset と inset の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は transparent の色の影で補完し、すべての長さが 0 であり、 inset (の有無) が一致するものがあれば、より長いリストに一致します。

- -

形式文法

- -{{csssyntax}} - -

例

- -

3つの影の設定

- -

この例では、3 つの影を使用しています。インセットシャドウ、通常のドロップシャドウ、境界の効果を生む 2px の影です (3 つ目の影の代わりに {{cssxref('outline')}} を使用することもできます)。

- -
-

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>&mdash; Maya Angelou</p>
-</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);
-}
-
- -

{{EmbedLiveSample('Setting_three_shadows', '300', '300')}}

- -

offset と blur をゼロに設定

- -
-

x-offset, y-offset, blur がすべてゼロの場合、ボックスシャドウはすべての辺に同じ幅の単一色の囲み線になります。影は背後から手前にかけて描かれるため、最初の影はその後の影の最上位に表示されます。既定値通り、 border-radius が 0 に設定されていた場合、影の角は同様に尖った形になります。 border-radius にそれ以外の値を設定した場合、角は丸みを帯びます。。

- -

影が隣接する要素と重ならないように、また、含まれるボックスの境界線を超えないように、最も広いボックスシャドウの寸法のマージンを追加しました。ボックスシャドウはボックスモデルの寸法に影響を与えません。

- -

HTML

- -
<div><p>Hello World</p></div>
- -

CSS

- -
p {
-  box-shadow: 0 0 0 2em #F4AAB9,
-              0 0 0 4em #66CCFF;
-  margin: 4em;
-  padding:1em;
-}
-
- -

{{EmbedLiveSample('Setting_zero_for_offset_and_blur', '300', '300')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.box-shadow")}}

- -

関連情報

- - diff --git a/files/ja/web/css/box-shadow/index.md b/files/ja/web/css/box-shadow/index.md new file mode 100644 index 0000000000..c33f487fb6 --- /dev/null +++ b/files/ja/web/css/box-shadow/index.md @@ -0,0 +1,190 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Property + - CSS Styles + - CSS スタイル + - CSS プロパティ + - CSS 背景と境界 + - HTML Colors + - Reference + - Shadows + - Styles + - Styling HTML + - box-shadow + - 'recipe:css-property' + - 影 +translation_of: Web/CSS/box-shadow +--- +
{{CSSRef}}
+ +

box-shadow は CSS のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。

+ +
{{EmbedInteractiveExample("pages/css/box-shadow.html")}}
+ + + +

box-shadow プロパティで、ほぼすべての要素のフレームから影を落とすことができます。 {{cssxref("border-radius")}} が指定された場合は、影もその丸みを反映します。複数のボックスの影の重ね合わせ順は、複数のテキストの影の場合と同様になります (最初に指定された影が最も手前に来ます)。

+ +

ボックスの影作成ツールは、 box-shadow を対話的に作成できるツールです。

+ +

構文

+ +
/* キーワード値 */
+box-shadow: none;
+
+/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* 複数の影はカンマで区切る */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* グローバルキーワード */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+
+ +

単一の box-shadow の使用を指定してみます。

+ + + +

複数の影を指定するには、影をカンマで区切ったリストを提供します。

+ +

値

+ +
+
inset
+
指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。
+ inset キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 inset な影は背景の上、境界や内容の下に描画されます。
+
<offset-x> <offset-y>
+
これら２つの {{cssxref("<length>")}} 値は、影のオフセットを設定します。 <offset-x> は水平方向の距離を表します。負の値が指定された場合、影は左方向に延びます。 <offset-y> は垂直方向の距離を表します。負の値が指定された場合、影は上方向に延びます。利用可能な値の単位については {{cssxref("<length>")}} をご覧ください。
+ どちらのオフセットも 0 である場合、影は要素の裏に配置されます。 (<blur-radius> や <spread-radius> が指定されている場合は、ぼかし効果が与えられるでしょう。)
+
<blur-radius>
+
これは３番目の {{cssxref("<length>")}} 値です。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は 0 となります (影の縁にぼかしが入りません)。仕様書にはぼかしの半径の計算方法について正確なアルゴリズムは書かれていませんが、以下のように複雑なものです。
+
+
…影の辺が長くまっすぐな場合、影の辺に垂直で中心にあるぼかし距離の長さの色遷移を作成し、影の内側の半径の端点で完全な影の色からその外側の端点で完全に透明になるまでの範囲の色遷移を作成する必要があります。
+
+
<spread-radius>
+
4 番目に指定された {{cssxref("<length>")}} の値。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は 0 と解釈され、影の大きさは要素の大きさと同じままとなります。
+
<color>
+
可能なキーワード及び記述方法については {{cssxref("<color>")}} の値をご覧ください。
+ 値が指定されていない場合は、既定で {{cssxref("currentcolor")}} になります。
+
+ +

補間

+ +

リストの中 (none は長さ 0 のリスト) 中のそれぞれの影は、色の成分、 x、 y、 ぼかし、及び (適切であれば) 広がり (の長さ) の成分で補間されます。両方の影について、もし inset が異なる場合、補間された影はそれに関する入力影と一致しなければなりません。入力影で inset と inset の組み合わせがない場合、影のリスト全体は解釈できません。影のリストの長さが異なる場合、影のリストの長さが異なる場合、短い方のリストの末尾は transparent の色の影で補完し、すべての長さが 0 であり、 inset (の有無) が一致するものがあれば、より長いリストに一致します。

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

3つの影の設定

+ +

この例では、3 つの影を使用しています。インセットシャドウ、通常のドロップシャドウ、境界の効果を生む 2px の影です (3 つ目の影の代わりに {{cssxref('outline')}} を使用することもできます)。

+ +
+

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>&mdash; Maya Angelou</p>
+</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);
+}
+
+ +

{{EmbedLiveSample('Setting_three_shadows', '300', '300')}}

+ +

offset と blur をゼロに設定

+ +
+

x-offset, y-offset, blur がすべてゼロの場合、ボックスシャドウはすべての辺に同じ幅の単一色の囲み線になります。影は背後から手前にかけて描かれるため、最初の影はその後の影の最上位に表示されます。既定値通り、 border-radius が 0 に設定されていた場合、影の角は同様に尖った形になります。 border-radius にそれ以外の値を設定した場合、角は丸みを帯びます。。

+ +

影が隣接する要素と重ならないように、また、含まれるボックスの境界線を超えないように、最も広いボックスシャドウの寸法のマージンを追加しました。ボックスシャドウはボックスモデルの寸法に影響を与えません。

+ +

HTML

+ +
<div><p>Hello World</p></div>
+ +

CSS

+ +
p {
+  box-shadow: 0 0 0 2em #F4AAB9,
+              0 0 0 4em #66CCFF;
+  margin: 4em;
+  padding:1em;
+}
+
+ +

{{EmbedLiveSample('Setting_zero_for_offset_and_blur', '300', '300')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.box-shadow")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf