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
175
176
177
178
179
180
181
182
183
|
---
title: width
slug: Web/CSS/width
tags:
- CSS
- CSS プロパティ
- レイアウト
- リファレンス
- 寸法
- recipe:css-property
- size
- width
browser-compat: css.properties.width
translation_of: Web/CSS/width
---
{{CSSRef}}
**`width`** は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティは[コンテンツ領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area)の幅を設定しますが、 {{cssxref("box-sizing")}} を `border-box` に設定すると、[境界領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area)の幅を設定します。
{{EmbedInteractiveExample("pages/css/width.html")}}
{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは `width` を上書きします。
## 構文
```css
/* <length> 値 */
width: 300px;
width: 25em;
/* <percentage> 値 */
width: 75%;
/* キーワード値 */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;
/* グローバル値 */
width: inherit;
width: initial;
width: revert;
width: unset;
```
### 値
- {{cssxref("<length>")}}
- : 絶対的な値で幅を定義します。
- {{cssxref("<percentage>")}}
- : 親となる包含ブロックの幅に対するパーセント値で定義します。
- `auto`
- : 指定された要素の幅をブラウザーが計算して決めます。
- `max-content`
- : 望ましい固有の幅です。
- `min-content`
- : 最小の固有の幅です。
- `fit-content({{cssxref("<length-percentage>")}})`
- : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, <length-percentage>))` です。
## アクセシビリティの考慮
ページを拡大してテキストサイズを大きくしたときに、 `width` を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。
- [MDN WCAG の理解、 ガイドライン 1.4 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
## 公式定義
{{CSSInfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Default_width">既定の幅</h3>
```css
p.goldie {
background: gold;
}
```
```html
<p class="goldie">The Mozilla community produces a lot of great software.</p>
```
{{EmbedLiveSample('Default_width', '500px', '64px')}}
<h3 id="Pixels_and_ems">ピクセル数と em 単位</h3>
```css
.px_length {
width: 200px;
background-color: red;
color: white;
border: 1px solid black;
}
.em_length {
width: 20em;
background-color: white;
color: red;
border: 1px solid black;
}
```
```html
<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>
```
{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}
<h3 id="Percentage">パーセント値</h3>
```css
.percent {
width: 20%;
background-color: silver;
border: 1px solid red;
}
```
```html
<div class="percent">Width in percentage</div>
```
{{EmbedLiveSample('Percentage', '500px', '64px')}}
### max-content
```css
p.maxgreen {
background: lightgreen;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
width: max-content;
}
```
```html
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
```
{{EmbedLiveSample('max-content', '500px', '64px')}}
### min-content
```css
p.minblue {
background: lightblue;
width: -moz-min-content; /* Firefox */
width: -webkit-min-content; /* Chrome */
width: min-content;
}
```
```html
<p class="minblue">The Mozilla community produces a lot of great software.</p>
```
{{EmbedLiveSample('min-content', '500px', '155px')}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
- {{cssxref("height")}}
- {{cssxref("box-sizing")}}
- {{cssxref("min-width")}}, {{cssxref("max-width")}}
- 対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}
|
