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

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

構文

/* <length> 値 */
width: 300px;
width: 25em;

/* <percentage> 値 */
width: 75%;

/* キーワード値 */
width: 25em border-box;
width: 75% content-box;
width: max-content;
width: min-content;
width: available;
width: fit-content;
width: auto;

/* グローバル値 */
width: inherit;
width: initial;
width: unset;

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

<length>
絶対的な値で幅を定義します。
<percentage>
親となるブロックの幅に対するパーセント値で定義します。包含ブロックの幅がこの要素の幅に依存する場合は、レイアウトは未定義の結果になります。
border-box
指定された場合は、先行する <length> または <percentage> がこの要素の境界ボックスに適用されます。
content-box
指定された場合は、先行する <length> または <percentage> がこの要素のコンテンツボックスに適用されます。
auto
指定された要素の幅をブラウザーが計算し、幅を選択します。
fill
書字方向に応じて fill-available インラインサイズまたは fill-available ブロックサイズを使用します。
max-content
望ましい固有の幅です。
min-content
最小の固有の幅です。
available
包含ブロックの幅から、水平方向のマージン、境界、パディングを引いた寸法です。
fit-content
以下のうち大きい方の幅です。
  • 最小の固有の幅
  • 望ましい固有の幅と利用可能な幅のうち、小さい方の幅

形式文法

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

既定の幅

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 は標準外の名称を使用 */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}
<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 */
}
<p class="minblue">The Mozilla community produces a lot of great software.</p>

アクセシビリティの考慮事項

文字サイズを大きくするためにページをズームしたときに、width を設定した要素が切り捨てられたり隠されたりしないようにしてください。

仕様書

仕様書 状態 備考
CSS Basic Box Model
width の定義
草案 キーワード max-content, min-content, available, fit-content, border-box, content-box を追加
CSS Transitions
width の定義
草案 width をアニメーション可能とした
CSS Intrinsic & Extrinsic Sizing Module Level 3
width の定義
草案 width および height に新しい寸法指定キーワードを追加
CSS Level 2 (Revision 1)
width の定義
勧告 適用対象の要素を詳しく記載
CSS Level 1
width の定義
勧告 初回定義
初期値auto
適用対象all elements but non-replaced inline elements, table rows, and row groups
継承なし
パーセンテージ包含ブロックの幅
メディア視覚
計算値パーセンテージ、auto、絶対的な長さのいずれか
アニメーションの種類length または percentage, calc();
正規順序the length or percentage before the keyword, if both are present

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Animatable
実験的
Chrome ? Edge ? Firefox 完全対応 16IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 16Opera Android ? Safari iOS ? Samsung Internet Android ?
max-content
実験的
Chrome 完全対応 46
完全対応 46
完全対応 22
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE ? Opera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 6.1
接頭辞付き
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 2
代替名
代替名 非標準の名前 intrinsic を使用しています。
WebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
min-content
実験的
Chrome 完全対応 46
完全対応 46
完全対応 22
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Edge 未対応 なしFirefox 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE ? Opera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 6.1
接頭辞付き
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 2
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
WebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
stretch
実験的
Chrome 完全対応 22
代替名
完全対応 22
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Edge 未対応 なしFirefox 完全対応 3
代替名
完全対応 3
代替名
代替名 非標準の名前 -moz-available を使用しています。
IE ? Opera ? Safari 完全対応 6.1
接頭辞付き
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 37
代替名
完全対応 37
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Chrome Android 完全対応 25
代替名
完全対応 25
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
fit-content
実験的
Chrome 完全対応 46
完全対応 46
完全対応 22
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 6.1
代替名
完全対応 6.1
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
WebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0
代替名
完全対応 5.0
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
content-box
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし
border-box
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし
fill
実験的非標準
Chrome 完全対応 46Edge 未対応 なしFirefox ? IE ? Opera ? Safari ? WebView Android 完全対応 46Chrome Android 完全対応 46Edge Mobile 未対応 なしFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android 完全対応 5.0

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, Sebastianz, Simplexible, Prinz_Rana, SphinxKnight, ethertank
最終更新者: mfuji09,