aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/background/index.html
blob: 9b9d627a88ca7773d2ee019c53c1b6356acaf3dd (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
---
title: background
slug: Web/CSS/background
tags:
  - CSS
  - CSS Background
  - CSS Property
  - Reference
  - 'recipe:css-shorthand-property'
translation_of: Web/CSS/background
---
<p>{{CSSRef("CSS Background")}}</p>

<p><span class="seoSummary"><strong><code>background</code></strong><a href="/ja/docs/Web/CSS">CSS</a><a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。</span></p>

<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>

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

<ul>
 <li>{{cssxref("background-attachment")}}</li>
 <li>{{cssxref("background-clip")}}</li>
 <li>{{cssxref("background-color")}}</li>
 <li>{{cssxref("background-image")}}</li>
 <li>{{cssxref("background-origin")}}</li>
 <li>{{cssxref("background-position")}}</li>
 <li>{{cssxref("background-repeat")}}</li>
 <li>{{cssxref("background-size")}}</li>
</ul>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: css no-line-numbers notranslate">/* &lt;background-color&gt; を使用 */
background: green;

/* &lt;bg-image&gt;&lt;repeat-style&gt; を使用 */
background: url("test.jpg") repeat-y;

/* &lt;box&gt;&lt;background-color&gt; を使用 */
background: border-box red;

/* 単一の画像、中央寄せかつ縮小 */
background: no-repeat center/80% url("../img/image.png");
</pre>

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

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

<ul>
 <li>それぞれのレイヤーは、以下の値をそれぞれ0~1回含めることができます。
  <ul>
   <li><code><a href="#&lt;attachment>">&lt;attachment&gt;</a></code></li>
   <li><code><a href="#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
   <li><code><a href="#&lt;position>">&lt;position&gt;</a></code></li>
   <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
   <li><code><a href="#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
  </ul>
 </li>
 <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code> の値は <code><a href="#&lt;position>">&lt;position&gt;</a></code> の直後に '/' の文字で区切って含めなければなりません。例: "<code>center/80%</code>"</li>
 <li><code><a href="#&lt;box>">&lt;box&gt;</a></code> の値は0~2回含めることができます。1回の場合は {{cssxref("background-origin")}}{{cssxref("background-clip")}} の両方に設定されます。2回の場合は、1つ目は {{cssxref("background-origin")}} に、2つ目は {{cssxref("background-clip")}} に設定されます。</li>
 <li><code><a href="#&lt;background-color>">&lt;background-color&gt;</a></code> の値は最後のレイヤーの指定でのみ含めることができます。</li>
</ul>

<h3 id="Values" name="Values"></h3>

<dl>
 <dt id="&lt;attachment>"><code>&lt;attachment&gt;</code></dt>
 <dd>{{cssxref("background-attachment")}} を参照</dd>
 <dt id="&lt;box>"><code>&lt;box&gt;</code></dt>
 <dd>{{cssxref("background-clip")}} 及び {{cssxref("background-origin")}} を参照</dd>
 <dt id="&lt;background-color>"><code>&lt;background-color&gt;</code></dt>
 <dd>{{cssxref("background-color")}} を参照</dd>
 <dt id="&lt;bg-image>"><code>&lt;bg-image&gt;</code></dt>
 <dd>{{Cssxref("background-image")}} を参照</dd>
 <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
 <dd>{{cssxref("background-position")}} を参照</dd>
 <dt id="&lt;repeat-style>"><code>&lt;repeat-style&gt;</code></dt>
 <dd>{{cssxref("background-repeat")}} を参照</dd>
 <dt id="&lt;bg-size>"><code>&lt;bg-size&gt;</code></dt>
 <dd>{{cssxref("background-size")}} を参照。</dd>
</dl>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

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

<ul>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

{{csssyntax}}

<h2 id="Examples" name="Examples"></h2>

<h3 id="Setting_backgrounds_with_color_keywords_and_images" name="Setting_backgrounds_with_color_keywords_and_images">色キーワードと画像による背景の設定</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p class="topbanner"&gt;
  Starry sky&lt;br/&gt;
  Twinkle twinkle&lt;br/&gt;
  Starry sky
&lt;/p&gt;
&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush:css' highlight:[2,6]; notranslate">.warning {
  background: pink;
}

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

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>

<p>{{Compat("css.properties.background")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{cssxref("box-decoration-break")}}</li>
 <li><a href="/ja/docs/Web/CSS/Using_CSS_gradients">グラデーションの使用</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">複数の背景の使用</a></li>
</ul>