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
以下のうち大きい方の幅です:
  • コンテンツエリア固有の最小幅
  • コンテンツエリア固有の好ましい幅と available の幅を比較して、小さい方の幅

形式構文

[ <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 Level 2 (Revision 1)
width の定義
勧告 適用対象の要素を詳しく記載
CSS Level 1
width の定義
勧告 最初の定義
CSS Intrinsic & Extrinsic Sizing Module Level 3
width の定義
草案 width および height に新しいサイズ指定キーワードを追加
初期値auto
適用対象all elements but non-replaced inline elements, table rows, and row groups
継承なし
パーセンテージ包含ブロックの幅
メディアvisual
計算値パーセンテージ、auto、絶対的な長さのいずれか
アニメーションの種類length または percentage, calc();
正規順序the length or percentage before the keyword, if both are present

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり12143.51
Animatable ? ?16 ? ? ?
max-content

46

22 -webkit-

なし3 -moz- ?15 -webkit-

6.1 -webkit-

21

min-content

46

222

なし3 -moz- ?15 -webkit-

6.1 -webkit-

22

available なし なし3 -moz- ? ? ?
fill-available22 -webkit- なし なし ? ?6.1 -webkit-
fit-content

46

22 -webkit-

なし3 -moz- なし15 -webkit- 6.1 -webkit-
content-box なし なし なし なし なし なし
border-box なし なし なし なし なし なし
fill46 なし ? ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
Animatable ? ? ?16 ? ? ?
max-content4646 なし ? ? ?5.0
min-content4646 なし ? ? ?5.0
available ? ? なし ? ? ? なし
fill-available4646 なし ? ? ?5.0
fit-content4646 なし ? ? ?5.0
content-box ? ? なし ? ? ? なし
border-box ? ? なし ? ? ? なし
fill4646 なし ? ? ?5.0

1. Supported as intrinsic.

2. Supported as min-intrinsic.

関連情報

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

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