width

width は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 box-sizingborder-box に設定すると、境界領域の幅を設定します。

min-width および max-width プロパティは、 width を上書きします。

構文

/* <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: unset;

width プロパティは以下のいずれかの値で指定します。

<length>
絶対的な値で幅を定義します。
<percentage>
親となる包含ブロックの幅に対するパーセント値で定義します。
auto
指定された要素の幅をブラウザーが計算して決めます。
max-content
望ましい固有の幅です。
min-content
最小の固有の幅です。
fit-content(<length-percentage>)
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, <length-percentage>)) です。

アクセシビリティの考慮

ページを拡大してテキストサイズを大きくしたときに、 width を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。

公式定義

初期値auto
適用対象all elements but non-replaced inline elements, table rows, and row groups
継承なし
パーセンテージ包含ブロックの幅
計算値パーセンテージ、auto、絶対的な長さのいずれか
アニメーションの種類length または percentage, calc();

形式文法

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)

where
<length-percentage> = <length> | <percentage>

既定の幅

p.goldie {
  background: gold;
}
<p class="goldie">The Mozilla community produces a lot of great software.</p>

ピクセル数と em 単位

.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;
}
<div class="px_length">Width measured in px</div>
<div class="em_length">Width measured in em</div>

パーセント値

.percent {
  width: 20%;
  background-color: silver;
  border: 1px solid red;
}
<div class="percent">Width in percentage</div>

max-content

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;
}
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

min-content

p.minblue {
  background: lightblue;
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
  width: min-content;
}
<p class="minblue">The Mozilla community produces a lot of great software.</p>

仕様書

仕様書 状態 備考
CSS Box Sizing Module Level 4
width の定義
編集者草案
CSS Box Sizing Module Level 3
width の定義
草案 キーワード max-content, min-content, fit-content を追加
CSS Level 2 (Revision 1)
width の定義
勧告 適用対象の要素を詳しく記載
CSS Level 1
width の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
widthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
AnimatableChrome 完全対応 26Edge 完全対応 12Firefox 完全対応 16IE 完全対応 11Opera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 4.4Chrome Android 完全対応 26Firefox Android 完全対応 16Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5
fill
実験的非標準
Chrome 完全対応 46Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 33Safari 完全対応 12WebView Android 完全対応 46Chrome Android 完全対応 46Firefox Android 未対応 なしOpera Android 完全対応 33Safari iOS 完全対応 12Samsung Internet Android 完全対応 5.0
fit-contentChrome 完全対応 46
完全対応 46
完全対応 22
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 1 — 48
代替名
代替名 非標準の名前 intrinsic を使用しています。
Edge 完全対応 79
完全対応 79
完全対応 79
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 33
完全対応 33
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 15 — 35
代替名
代替名 非標準の名前 intrinsic を使用しています。
Safari 完全対応 11
完全対応 11
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 2
代替名
代替名 非標準の名前 intrinsic を使用しています。
WebView Android 完全対応 46
完全対応 46
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 1 — 48
代替名
代替名 非標準の名前 intrinsic を使用しています。
Chrome Android 完全対応 46
完全対応 46
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 18 — 48
代替名
代替名 非標準の名前 intrinsic を使用しています。
Firefox Android 完全対応 4
接頭辞付き
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 33
完全対応 33
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 14 — 35
代替名
代替名 非標準の名前 intrinsic を使用しています。
Safari iOS 完全対応 11
完全対応 11
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 1
代替名
代替名 非標準の名前 intrinsic を使用しています。
Samsung Internet Android 完全対応 5.0
完全対応 5.0
完全対応 1.5
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 1.0 — 5.0
代替名
代替名 非標準の名前 intrinsic を使用しています。
max-contentChrome 完全対応 46
完全対応 46
完全対応 22
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 79
完全対応 79
完全対応 79
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44Safari 完全対応 11
完全対応 11
完全対応 2
代替名
代替名 非標準の名前 intrinsic を使用しています。
WebView Android 完全対応 46Chrome Android 完全対応 46Firefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 43Safari iOS 完全対応 11
完全対応 11
完全対応 1
代替名
代替名 非標準の名前 intrinsic を使用しています。
Samsung Internet Android 完全対応 5.0
min-contentChrome 完全対応 46
完全対応 46
未対応 1 — 48
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Edge 完全対応 79Firefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 33
完全対応 33
未対応 15 — 35
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Safari 完全対応 11
完全対応 11
完全対応 2
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
WebView Android 完全対応 46
完全対応 46
未対応 1 — 48
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Chrome Android 完全対応 46
完全対応 46
未対応 18 — 48
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Firefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 33
完全対応 33
未対応 14 — 35
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Safari iOS 完全対応 11
完全対応 11
完全対応 1
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Samsung Internet Android 完全対応 5.0
完全対応 5.0
未対応 1.0 — 5.0
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
stretch
実験的
Chrome 完全対応 22
代替名
完全対応 22
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Edge 完全対応 79
代替名
完全対応 79
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Firefox 完全対応 3
代替名
完全対応 3
代替名
代替名 非標準の名前 -moz-available を使用しています。
IE 未対応 なしOpera 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Safari 完全対応 6.1
代替名
完全対応 6.1
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
WebView Android 完全対応 4.4
代替名
完全対応 4.4
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Chrome Android 完全対応 25
代替名
完全対応 25
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Firefox Android 完全対応 4
代替名
完全対応 4
代替名
代替名 非標準の名前 -moz-available を使用しています。
Opera Android 完全対応 14
代替名
完全対応 14
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Safari iOS 完全対応 6.1
代替名
完全対応 6.1
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Samsung Internet Android 完全対応 5.0
代替名
完全対応 5.0
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報