CSS ・ 余白・サイズ
width
幅
要素の横幅を指定します。px などの固定値のほか、親要素に対する割合（%）でも指定できます。
01
サンプルコード
HTML
1<div class="box w-auto">width: auto（親の幅いっぱい）</div>
2<div class="box w50">width: 50%</div>
3<div class="box w200">width: 200px</div>
CSS
1.box {
2 margin-bottom: 8px;
3 padding: 8px;
4 background: #f6ead8;
5 border: 1px solid #b68235;
6}
7.w50 {
8 width: 50%;
9}
10.w200 {
11 width: 200px;
12}
02
実行結果
ブラウザでの表示
03
解説
width は要素の横幅を指定するプロパティです。ブロック要素は初期値の auto のとき、親要素の幅いっぱいに広がります。
% で指定すると親要素の幅に対する割合になり、親の大きさに合わせて伸び縮みします。
span などのインライン要素には width が効きません。幅を指定したいときは display: inline-block などに変えます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
auto | 自動（ブロック要素は親の幅いっぱい） |
300px | 固定の幅 |
50% | 親要素の幅の50% |
fit-content | 内容に合わせた幅 |
100vw | 画面の横幅（スクロールバーを含む） |
画面の幅に合わせつつ最大幅を決める
width と max-width を組み合わせると、狭い画面では縮み、広い画面では広がりすぎません。
CSS
1.container {
2 width: 100%;
3 max-width: 960px;
4 margin: 0 auto;
5}
注意点
- 01固定幅（px）ばかりで組むと、スマートフォンで画面からはみ出します。
- 02初期値では padding と border の分が width に加算されます。