widthプロパティは要素の生成するボックスの内容領域の横幅を指定します。適用対象は、非置換インライン要素表の行・行グループ要素tr要素, thead要素, tfoot要素, tbody要素)を除くすべての要素です。つまり、ブロックボックスを形成する要素インラインブロックボックスを形成する要素が対象となります。

初期値
auto
適用対象
すべての要素(表の行・行グループ要素非置換インライン要素を除く)
継承
しない
メディア
visual

widthプロパティの値

widthプロパティに指定できる値は、それぞれ以下の意味を示します。

<長さ>
"em", "px" などの単位識別子を伴う数値で指定(負の値は不正)
<パーセンテージ>
包含ブロックの横幅を基準とするパーセンテージ(%)による割合で指定(負の値は不正)
auto
内容(コンテンツ)に合わせて自動調整

"auto" を指定した場合、指定された要素によって解釈が異なります。ブロックボックスを形成する要素に指定した場合、要素の生成するボックスの横幅は左右いっぱいにまで広がり、置換インライン要素に指定した場合、img要素であれば画像そのものサイズの横幅になり、その他の applet要素, input要素, object要素, select要素, textarea要素は UA が決定する内在寸法が横幅となります。

パーセンテージ値が基準値として参照する包含ブロックとは、祖先要素の中でもっとも近い祖先にあたる親要素のブロックボックスの内容領域のことを指します。たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは、html要素の各辺が基準になるので、スクロール分も含めてページ全体が基準になります。この包含ブロックの中で、widthプロパティのパーセンテージ値は横幅を基準値として参照します。

なお、横幅のサイズを固定するのではなく、柔軟に変化できる横幅にしたい場合は、横幅の最小値・最大値を指定する、min-widthプロパティmax-widthプロパティを使います。また、内容領域の横幅を指定する widthプロパティに対して、内容領域の高さは heightプロパティで指定します。さらに、ボックスの内容領域をはみ出した場合の表示方法については overflowプロパティでコントロールすることができます。

widthプロパティの実装状況

IE
◯:IE6の後方互換モードではボーダー領域までを含めて横幅として振る舞う
Firefox
Opera
Chrome
Safari
iOS
Android

サンプル

div { width : 200px ; height : 200px ; margin : 0 auto ; border : 1px solid ; }

div要素のようなブロックボックスを形成する要素が形成するブロックボックスは、通常は横幅一杯に広がっていますが、横幅をwidthプロパティで指定し、左右に均等のマージン(margin-left : auto ; margin-right : auto ;)を生成することで中央揃えにすることもできます(参考:CSS によるブロックレベル要素の左右中央揃え)。

Updated / Published