width

概要

CSS の width プロパティは、要素のコンテンツエリア領域の横幅を指定するためのプロパティです。コンテンツエリアとは、要素のパディング、ボーダー、マージンより内側の領域を指します。

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

初期値	`auto`
適用対象	all elements but non-replaced inline elements, table rows, and row groups
継承	不可
相対値の基準	包含ブロックの幅
メディア	visual
計算値	パーセンテージ、auto、絶対的な長さのいずれか
アニメーションの可否	可。。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの `calc()` 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc();
正規順序	the length or percentage before the keyword, if both are present

構文

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

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

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

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

値

<length>

指定可能な単位については <length> を参照して下さい。

<percentage>

親となるブロックの幅に対する <percentage> を指定します。親ブロックの幅が要素の幅に依存する場合は、レイアウト結果が不定になります。

border-box

<length> または <percentage> を要素のボーダーボックスに適用

content-box

<length> または <percentage> を要素のコンテンツボックスに適用

auto

ブラウザにコンテンツ幅の計算を委ねる事を意味する指定

max-content

コンテンツエリア固有の望ましい幅です。

min-content

コンテンツエリア固有の最小幅です。

available

以下のうち大きい方の幅です:

コンテンツエリア固有の最小幅
コンテンツエリア固有の好ましい幅と 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>

仕様

仕様書	策定状況	コメント
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 の定義	勧告	最初の定義

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
基本サポート	(有)	1.0 (1.7 or earlier)	4	3.5	1.0 (85)
Animatability	?	16.0 (16.0)	?	?	?
`max-content`	22.0 -webkit 46.0 [1]	3.0 (1.9)-moz	?	15 -webkit	2.0 (421) (`intrinsic` 値) 6.1 -webkit
`min-content`	22.0 [4] -webkit 46.0 [1]	3.0 (1.9) -moz	?	15 -webkit	2.0 (421) (`min-intrinsic` 値) 6.1 -webkit
`available`	未サポート	3.0 (1.9) -moz	?	?	?^[1]
`fill-available`	22.0 -webkit	未サポート	?	?	6.1 -webkit
`fit-content`	22.0 [4] -webkit 46.0 [1]	3.0 (1.9) -moz	?	15 -webkit	6.1 -webkit^[2]
`border-box` および `content-box`	未サポート	未サポート	未サポート	未サポート	未サポート

機能	Android	Android Webview	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
基本サポート	?	(有)	?	?	?	?	(有)
Animatability	?	?	16.0 (16.0)	?	?	?	?
`max-content`	?	46.0 [1]	?	?	?	?	46.0 [1]
`min-content`	?	46.0 [1]	?	?	?	?	46.0 [1]
`available`	?	?	?	?	?	?	?
`fill-available`	?	46.0 [1]	?	?	?	?	46.0 [1]
`fit-content`	?	46.0 [1]	?	?	?	?	46.0 [1]
`border-box` および `content-box`	?	?	?	?	?	?	?

[1] WebKit は 2013 年 12 月現在、この値の派生形を fill-available という名称で実装しています。

[2] 古いバージョンの WebKit ではこの値の旧版を intrinsic という名称で実装していましたが、バージョン 6.1 より fit-content も実装しています。

[3] 接頭辞を削除しました。

[4] 古い WebKit ではキーワード intrinsic および min-intrinsic をサポートしていましたが、Chrome 48 で廃止しました。