width
widthは、要素の幅を指定するスタイルです。
解説
値には数値、割合、autoの３パターンで指定できます。
構文
構文は以下になります。
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：ボックスサイズの計算方法を指定する
