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

+ +

関連情報

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