コーディング犬に聞く：「remとemってどう違うの？」

remは、html要素に設定された文字サイズを基準にする単位です。
多くのブラウザでは初期値が16pxなので、1remはだいたい16pxとして考えられます。

emは、親要素やその要素自身の文字サイズを基準にします。
つまり、置かれている場所によって大きさが変わることがあります。

remは、サイト全体でサイズ感をそろえたい時に向いています。
本文、見出し、余白、ボタンの内側の余白などをremで指定すると、全体のバランスを管理しやすくなります。

たとえば大阪の店舗サイトや士業サイトのように、読みやすさを大切にしたいページでは、
remを使うと調整がしやすいです。

emは、部品の中だけでサイズを連動させたい時に便利です。
たとえばボタンの文字サイズに合わせて、余白も自然に大きくしたい場合です。

文字が大きいボタンなら余白も大きく、小さいボタンなら余白も小さくできます。
部品単位で考えると、emはとても実務的です。

pxが悪いわけではありません。線の太さ、アイコンの細かい位置、
境界線など、固定したい部分にはpxがわかりやすいです。

ただし、本文サイズや大きな余白をすべてpxで決めると、あとから全体調整が大変になることがあります。
まずはremを中心にして、必要なところだけpxを使う考え方がおすすめです。

基本は、文字サイズや余白にremを使うところから始めるとわかりやすいです。

html {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

.button {
  font-size: 1rem;
  padding: 0.75em 1em;
}

この例では、全体の基準はremでそろえ、ボタンの余白は文字サイズに合わせてemで動くようにしています。