remとemはどう違うの？

remは常にページの基準サイズ（標準16px）に対する倍率、emは「その場所の親の文字サイズ」に対する倍率です。emは入れ子になると計算がずれやすいので、迷ったらremを使うのがおすすめです。

ぜんぶpxで書いてはだめ？

練習のうちは問題ありません。ただ、文字サイズをpxで固定すると、ブラウザの文字サイズ設定を大きくしている人に反映されないことがあります。公開するページの文字はremにしておくと親切です。

標準では16pxです。24pxにしたいなら24÷16＝1.5remのように、16で割ると換算できます。

font-size: 16px、width: 50%、margin: 1rem——CSSの数字のうしろに付く単位、結局どれを使えばいいのか迷いますよね。この記事で、よく使う4つの正体と「迷ったらこれ」の使い分けを整理します。

大事なのは「何を基準にした大きさか」がそれぞれ違うこと。pxだけが固定で、あとの3つは何かに連動して伸び縮みします。

いちばん直感的な単位。書いた数字の大きさに、そのままなります。境界線の太さ（border: 1px）や細かい余白など、伸び縮みしてほしくない場所に向いています。

width: 50%は「親の幅の半分」。画面が狭くなれば親も縮むので、いっしょに縮んでくれます。横幅を柔らかく決めたいときの主役です。

img {
  max-width: 100%;   /* 親からはみ出さない、の定番 */
}

remはページの基準文字サイズ（標準16px）を1とする倍率です。1rem＝16px、1.5rem＝24px。16で割れば換算できます。

remの本領は、ブラウザの文字サイズ設定に連動すること。「文字を大きく」設定にしている人のページでは、remで書いた文字はちゃんと大きくなります。pxで書いた文字は、設定を変えても大きくなりません。

スライダーが再現しているのは、利用者がブラウザの設定で文字サイズを変えたときの動き。remの段落だけが素直についてきます。

100vw＝画面の幅いっぱい、100vh＝画面の高さいっぱい。ファーストビューを画面ぴったりに作るときの定番です。

.hero {
  height: 100vh;   /* 画面の高さいっぱいのヒーロー */
}

「文字はrem、幅は%、こまかい調整はpx」——この3行だけ覚えれば、実戦はほぼ困りません。

単位を意識して選べるようになると、どんな画面でも崩れない、しなやかなページに近づきます。