W3G

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 によるブロックレベル要素の左右中央揃え）。