width

CSSプロパティ「width」についての解説。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

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で指定した幅と同じ比率で高さも拡大/縮小される。