【CSS】ウェブで使われる単位「rem」を使ってレイアウトをしてみよう

「rem」は主にフォントサイズを設定するときに使われますが、レイアウト全般にも使いやすい単位になっているので、この機会に「rem」でレイアウトをしてみましょう。

CONTENTS

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

remとemの違い

「rem」と似たような単位に「em」というものがあります。remとemはどちらも要素の値を基本にして相対的なサイズを設定するというものですが、それぞれの違いを知っておく必要があります。

emは「エム」と呼ばれていて、元は英語の「M」の大きさを1としていた単位です。ウェブでは1文字分が1emとなり、親要素のフォントサイズを参照して相対的に設定されます。

下記のようなコードがあった場合、emを指定したpの大きさは10pxになります。

html {
  font-size: 16px;
}

.sample {
  font-size: 10px; // これが参照されます。

  p {
    font-size: 1em;
  }
}

remは「レム」と呼ばれていて、ルート(root)のエム(em)を省略したものです。1文字分が1remとなるのはemと同じですが、html要素に指定されたフォントサイズを参照して相対的に設定されます。

下記のようなコードがあった場合、remを指定したpの大きさは16pxになります。

html {
  font-size: 16px; // これが参照されます。
}

.sample {
  font-size: 10px;

  p {
    font-size: 1rem;
  }
}

emは親要素を参照しているため構造によっては管理が煩雑になりがちですが、remの場合はhtmlに指定しているフォントサイズを変更した場合、remを指定しているすべての要素の大きさを変更できるメリットがあります。

remの基本的な考え方は「html要素のフォントサイズを16pxにする」というのが前提です。これはパソコンやスマートフォンのデフォルトに設定されているフォントサイズが16pxとなっていることにならっていて、16px＝1remと考えることでレイアウトなどもしやすくなっています。

よく使われるサイズとそれに応じたremの値をざっと見てみるとこのようになります。

例えばボックスを作るには下記のようになります。

div {
  width: 80rem; // 1,280px
  height: 45rem; // 720px
}

つまり、remを使うことで1単位が16pxごとのレイアウトになるため小さな調整をする必要がなくなります。また、remには0.5や1.25など小数点を使った値も指定できますので、例えば8pxの余白を空けたい場合にはmargin:0.5rem;といった形でも利用できます。

というわけで、フォントサイズに対して指定することが多いremですが、レイアウトにremを使うことで値がシンプルになるので、ぜひ、この機会にremを使ってレイアウトを組んでみましょう。