値と単位

色の値は、red のような色名、#ffffff のような16進数、rgb(255, 255, 255) のように赤・緑・青を0〜255で表す書き方があります。rgba(255, 255, 255, .8) は rgb に透明度（Alpha）を加えたもので、最後の値が 0（透明）〜1（不透明）です。16進数は #ff0000 を #f00 のように3桁に省略できます。

px は画面の1ドットを1とする絶対値で、親や画面の大きさに関係なく同じ大きさになります。

% は親要素の値を基準にした相対値です。width: 50% なら親の幅の半分です。em は親要素の文字サイズ（font-size）が基準で、1.5em は親の1.5倍です。rem はルート要素（html）の文字サイズが基準で、ブラウザの初期値は 16px なので 1.5rem は 24px になります。

vw・vh はビューポート（ブラウザの表示領域）の横幅・縦幅を基準にした相対値で、1vw が横幅の1%です。vmin・vmax は、横幅と縦幅の小さいほう・大きいほうを基準にします。

単位の使い分けは、制作会社や案件のコーディングルール（レギュレーション）で決められていることが多いため、それぞれの違いを理解しておくことが大切です。一般的には、文字サイズは px・em・rem を使います。rem で指定しておくと、html の font-size を変えるだけでページ全体の文字サイズを一気に変更できます（PCサイトだけのページなら px でも問題ありません）。

レイアウトのサイズは px と % を使い分けます。header や main のようにページのレイアウトを担う要素の幅を % で指定すると、画面のサイズが変わっても要素が見切れたり、横スクロールが出たりしません。