width
ボックスの「幅」を指定するためのプロパティ。
値は「px」単位もしくは親ボックスに対する「％」で指定することができる。
値
| pxで指定 | 指定したい幅をpxで指定する。この場合、ディスプレイの大きさに左右されず、指定した部分の幅が固定される。 |
|---|---|
| ％で指定 | 親ボックスに対する割合で指定する。この場合、親ボックスの幅により、指定した部分の幅が変動する。 |
| autoで指定 | 何もしていない場合は「auto」という値になる。ただし、CSSレイアウトを組んだときに左右の罫線が表示されないといったIE特有のバグを回避する際には、あえて「auto」を指定することがある。 |
使用例 - サンプル(A) / サンプル(B) / サンプル(C)
サンプル(A)
[CSSの記述]
.sampleA { width:200px; background-color:#ffee66; }
[HTMLの記述]
<p class="sampleA">テキストテキスト</p>
[ブラウザ上の表示]
widthプロパティの値に200pxを指定した場合、指定したボックスの幅が200pxとなる。
サンプル(B)
[CSSの記述]
.sampleB { width:75%; background-color:#ffee66; }
[HTMLの記述]
<p class="sampleB">テキストテキスト</p>
[ブラウザ上の表示]
widthプロパティの値に75%を指定した場合、指定したボックスの幅が親ボックスの75%となる。
サンプル(C)
[CSSの記述]
.sampleC { width:200px; }
[HTMLの記述]
<img alt="サンプル" src="hogehoge.gif" class="sampleC" />
[ブラウザ上の表示]
画像のwidthを指定した場合、元のサイズに関係なくCSSで指定した幅となる。
同時にheight（高さ）を指定しない場合、widthで指定した幅と同じ比率で高さも拡大／縮小される。
- 次の記事：height