%はなにに対する割合なの？

その部品を包んでいる親の大きさに対する割合です。width: 50%なら「親の幅の半分」。画面そのものではなく、ひとつ外側の箱が基準になります。

widthを指定したのに効かないのはなぜ？

spanやaなど、文章の一部を指す部品（インラインの部品）は、幅や高さの指定を受けつけません。次のレッスンで学ぶdisplayを使うと、幅を指定できる部品に切りかえられます。

アイコンや写真のようにぴったり固定したい部品はwidth、文章やカードのように画面に合わせて縮んでほしいものはmax-widthが目安です。

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

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

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

数字を変えると、箱の大きさがそのまま変わります。

width が横、height が縦。数字を書いたぶんだけ、四角の大きさがぴたりと決まります。

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

.box {
  width: 50%;
}

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

「まわり」とは、正確にはその部品を包んでいる親（ひとつ外側の箱）のこと。画面いっぱいの箱の中なら画面の半分に、幅400pxの箱の中なら200pxになります。

グレーの親（幅400px）の中で、青い箱は50%＝ちょうど半分の幅に。親の大きさが変われば、この幅も一緒に変わります。

「高さは決めすぎない」と言いましたが、「最低でもこれくらいはほしい」というときもあります。そんなときは min-height（最小の高さ）の出番です。

.hero {
  min-height: 300px;
}

中身が少なくても300pxの高さは確保しつつ、中身が増えたらそれに合わせて伸びる。height とちがってはみ出す心配がないので、高さを持たせたいときはこちらが安全です。

上の箱は中身のぶんだけの高さ。下の箱は文字が1行でも、min-heightで120pxの高さがしっかり確保されます。

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

p {
  max-width: 500px;
}

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

広い親（上）では300pxで止まり、狭い親（下）では親に合わせて縮みます。「上限は決めるが、狭ければ縮む」——これがwidthとの違いです。

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

p {
  max-width: 32ch;
}

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