width

by 1 contributor:

概要

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

  • 初期値 auto
  • 適用対象 all elements but non-replaced inline elements, table rows, and row groups
  • 継承 継承しない
  • 相対値の基準 refer to the width of the containing block
  • メディア visual
  • 計算値 the percentage or auto as specified or the absolute length
  • アニメーションの可否 可。length または percentage, calc(); の値として補完します。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます。
  • 正規順序 the length or percentage before the keyword, if both are present

構文

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

<length>
指定可能な単位については <length> を参照して下さい。
<percentage>
親となるブロック要素に対する <割合> を指定
border-box
<length> または <割合> を要素のボーダーボックスに適用
content-box
<length> または <割合> を要素のコンテンツボックスに適用
auto
ブラウザにコンテンツ幅の計算を委ねる事を意味する指定
max-content
コンテンツが取り得る最大幅
注記: WebKit はintrinsic の名前でこの値の前バージョンを実装しており、 2012 年 6 月より、 fit-contents も実装されています。
min-content
コンテンツが取り得る最小幅
available
包含ブロックの幅から、それぞれ水平方向のマージン、ボーダー、パディングを取り除いたサイズ。
fit-content
内容物にフィットした幅。以下の様に算出される。
  1. max-content 指定時の値と、表示に利用可能な幅とを比較の内、値の小さいものをキープ。
  2. 前ステップの結果と min-content 指定時の値を比較して、値の大きい方を採用。

table { width: 100%; }

img   { width: 200px; }

form  { width: auto; }

p     { width: 40em; }

実際の表示を確認


p { background: gold }

The Mozilla community produces a lot of great software.


p {
  background: lightgreen;
  width: intrinsic;         /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;  /* Firefox/Gecko */
}

The Mozilla community produces a lot of great software.


p { background: lightblue;  max-width: -moz-min-content; }

The Mozilla community produces a lot of great software.


仕様

仕様書 策定状況 コメント
CSS Basic Box Model 草案 Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
CSS Transitions 草案 Lists width as animatable.
CSS Level 2 (Revision 1) 勧告 Precises on which element it applies to.
CSS Level 1 勧告 Initial specification.

ブラウザ実装状況

機能 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 -webkit 3.0 (1.9)-moz ? ? 2.0 (421) (intrinsic 値)
min-content 22 -webkit 3.0 (1.9) -moz ? ? ?
available 22 -webkit 3.0 (1.9) -moz ? ? ?
fit-content 22 -webkit 3.0 (1.9) -moz ? ? ?
border-box and content-box 未サポート 未サポート 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

関連情報

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

Contributors to this page: ethertank
最終更新者: ethertank,
サイドバーを隠す