概要
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 |
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 で廃止しました。
関連情報
- ボックスモデル
- コンテンツエリアのサイズに関連するプロパティ:
height
、box-sizing
、min-width
、max-width