CSS3スタイル虎の巻

width

widthは、要素の幅を指定するスタイルです。

解説

値には数値、割合、autoの3パターンで指定できます。

構文

構文は以下になります。

width: 値;

widthには以下の値が指定できます。

説明
数値pxなどの単位と共に数値で指定する
(例)width:300px;
割合割合で指定する
(例)width:70%;
auto要素の内容により自動で指定される
(例)width:auto;

太字の値は初期値です。

サンプル

要素の幅を200pxにする


.sample01 {
  width:200px;
}

<div class="sample01">width:200px</div>
width:200px

分かりやすくするため、上記結果例では枠線と背景色を指定しています。

要素の幅を70%にする


.sample02 {
  width:70%;
}

<div class="sample02">width:70%</div>
width:70%

外側の要素に対して70%のサイズになっています。

備考

  • auto(自動サイズ)がデフォルトのため、自動サイズにしたい場合は特に指定は不要です。

関連項目

  • height:要素の高さを指定する
  • width:要素の幅を指定する
  • box-sizing:ボックスサイズの計算方法を指定する