幅と高さを決める

ここまでは「色」や「文字」など、部品の中身の見た目を整えてきました。ここからは視点を広げて、部品そのものの大きさをあやつります。まずは、いちばん基本の「幅」と「高さ」から。

書いてみよう

.box {
  width: 300px;
  height: 200px;
  background-color: teal;
}

「幅300ピクセル、高さ200ピクセルの箱」という意味。背景色をつけると、指定した大きさの四角がはっきり見えます。

• width … 横の大きさ
• height … 縦の大きさ

画面に合わせて伸び縮みさせる

px のかわりに %（パーセント）を使うと、まわりに合わせた割合で大きさが決まります。

.box {
  width: 50%;
}

これは「まわりの半分の幅」という意味。画面が広ければ広く、狭ければ狭く、自動で伸び縮みします。スマホでもパソコンでも崩れにくいページは、こうした割合の指定でできています。

max-widthで「広がりすぎ」を防ぐ

max-width（最大の幅）を使うと、「ここまでは伸びていいけど、それ以上は広げない」という上限を決められます。

p {
  max-width: 500px;
}

width とちがい、画面が狭ければちゃんと縮みつつ、画面が広くなっても500pxより先には広がりません。大きな画面で文章が横に長く伸びすぎて読みにくくなるのを防ぐ、定番の使い方です。

文字数で幅を決める：ch単位

文章の幅は、pxのほかに ch という単位でも指定できます。

p {
  max-width: 32ch;
}

ch は「文字1文字ぶんの幅」を1とする単位（characterの略）。32chなら「だいたい半角32文字ぶんの幅」という意味になります。1行の文字数を基準に幅を決められるので、「1行が長すぎて読みにくい」を防ぐのにぴったりの単位です。

このレッスンのまとめ

1. 横幅は width、高さは height
2. % を使うとまわりに合わせて伸び縮みする
3. 高さは決めすぎず、width 中心に指定すると崩れにくい
4. max-width で上限を決め、文章にはch単位も便利

:::