From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/background/index.html | 174 +++++++++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 files/ja/web/css/background/index.html (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 new file mode 100644 index 0000000000..92ce9a9189 --- /dev/null +++ b/files/ja/web/css/background/index.html @@ -0,0 +1,174 @@ +--- +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