【width】内容領域の幅を設定

widthプロパティはブロックレベル要素や<IMG><TEXTAREA><INPUT><SELECT><OBJECT>などの置換要素のボックスの内容領域の幅(paddingとborderを含めない)を指定することができます。

指定方法は、数値にpxなどの単位を付ける方法、親ボックスの幅を100%として割合で指定する方法があります。 またキーワードでも指定できますが、使用できるのはブラウザが自動で幅を調整する「auto」のみとなっています。

※置換要素にautoを設定しても本来の幅になります。

widthプロパティには負の値は指定することができませんので注意して下さい。

非置換インライン要素の場合は、表示後の内容量によって幅が決まります。そのためwidthプロパティは設定できません。

なおWindowsのInternet Explorer(IE)5.5以前、またはIE6以降の互換モードの場合は、padding(余白)とborder(枠線)を含めた範囲に対しての幅の設定となります。 paddingborderを設定している場合には、他のブラウザと全く違う表示結果となる場合がありますので注意して下さい。

書式

  • width : ……… 幅の設定

★:数値+単位、パーセント、auto、inherit

数値+単位
数値にpxなどの単位を付けて内容領域の幅を設定します
パーセント値
内容領域の幅を、そのボックスを含んでいる親ボックスの幅に対する割合で設定します
auto
自動で調整されます。置換要素(imgなど)の場合は、その要素本来の幅と同じになります

使用した時の例

.sample1 {width: 100%;}
.sample2 {width: 200px;}

div {background:#DFF2FF;}
<div class="sample1">width:100%;</div>
<div class="sample2">width:200px;</div>

ブラウザ上の表示例

width:100%;
width:200px;

対応ブラウザなどのデータ

初期値 auto 値の継承 継承しない
適用可能な要素 全ての要素(非置換インライン要素,tr,thead,tbody,tfootを除く)
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報