We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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

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

初期値auto
適用対象all elements but non-replaced inline elements, table rows, and row groups
継承不可
相対値の基準包含ブロックの幅
メディアvisual
計算値パーセンテージ、auto、絶対的な長さのいずれか
Animation typelength または 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 の定義
勧告 最初の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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 で廃止しました。

関連情報

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

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