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 ++++++++++++++++++++++ 2 files changed, 151 insertions(+), 151 deletions(-) delete mode 100644 files/ja/web/css/background-attachment/index.html create mode 100644 files/ja/web/css/background-attachment/index.md (limited to 'files/ja/web/css/background-attachment') 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")}}

+ +

関連情報

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