rem em が出てきてギョッとした人へ。

※このエントリはコーディング初心者向けの内容です。

単位がpxじゃない！？

コーディング学習を始めた皆さんお疲れ様です。そろそろpaddingやmarginには慣れた頃でしょうか。沢山のサイトを観察している方は、○○pxのfont-sizeがどのくらいの大きさに見えるのかも分かってきたかと思います。

.section_ttl {
   font-size: 2.6rem;
   font-weight: bold;
   text-align: center;
   line-height: 1.2;
   margin-bottom: 40px;
   letter-spacing: 0.2em;
}

しかし、上記のように中にはpxではない単位で書かれたWebサイトがあったはずです。

スクール等に通っている方は、教材や自首参加のオンライン講座等で今までとは違う単位が出てきて「また何かよくわからないものが出てきたぞ……」と恐怖に駆られた方も少なくないでしょう。

今回は、レスポンシブを学ぶ上で避けては通れない「em rem %」についての学習まとめです。

絶対値と相対値

僕たちがCSSでサイズを数値で指定する時、大きく分けて2つの方法があります。

・絶対値（absolute）
【px】はこれです。言葉の通り、俺の言うことは絶対という値です。親要素が何だろうが、画面サイズが小さくなろうが大きくなろうが、「絶対に指定したサイズ」になります。

　
・相対値（relative）
対して、新たに登場した【em rem %】などは「親要素に影響を受ける値」です。依存する親要素のサイズが変わると、それに応じてこれらのサイズも変わります。

例えば親要素が60pxの絶対値が指定されているとしましょう。下ではbodyの文字サイズを指定しています。

body {
 font-size: 60px; 　/* 俺の言うことは絶対！何が何でも60px！ */
}

ではこの時の子要素としてdivがあるとします。仮にttlというclassをつけましょう。

.ttl {
 font-size: 100%;
}

この100%＝60pxです。わかりやすいですね。文字サイズを30pxにしたいときは、この指定を50％に指定するといいわけです。この時、%で指定された数値は親要素のbodyで指定されたpxに影響を受けて決定されています。
これを相対値、相対指定といいます。

絶対値と相対値を上手く使い分けることで、絶対値で指定した要素のサイズはいつでもそのまま。相対値で指定した要素のサイズは、画面が小さくなった時・大きくなった時に親要素の数値を変えてやるだけで、全ての相対値を丁度良いサイズに変更することができるのです。これはレスポンシブコーディングをスッキリ簡単にしてくれます。

em remとは

さて、%が親要素に影響を受けて決定されることがわかりました。では皆さんがギョッとしたemやremとはどういう単位なのでしょうか。

・em
発音は「エム」です。%と基本的には一緒です。親要素の値によって変動します。1emは親要素と同じであり100%を意味します。つまり、0.5emは50%ということです。
違いとしては、%は親要素を参照しましたが、emは「親要素のフォントサイズ」を参照します。
1emの大きさはブラウザーのfont-sizeのデフォルト値で決まります。制作側やユーザーが変更しなければ、1emは16pxです。

%とemは便利なこともありますが、htmlの入れ子構造が複雑化し、階層が増えてくると面倒になってきます。divタグの中にdivが、その中にさらにdivが入っている時などがそれです。タグごとに別々のサイズを指定していると、%やemは親要素を参照するので「ええとデフォルトを10pxに変更したから、bodyの80%は8pxで、一番上のdivの50%は8pxの50%だから4pxで、あれ？　小さすぎないか？ううーん」といつも親要素を気にして計算しないといけません。

・rem
そこでremが役立ちます。root emの略で「rem（レム）」と発音します。相対値なので、当然どこかを参照します。ルート、つまり「htmlのfont-size」を常に参照し変化するのです。その他の親要素には影響を受けません。

html{
  font-size: 62.5%;
}

上記のようにhtmlにサイズを指定することで、remで指定したものはこのhtmlのサイズを基準として表示されます。62.5%にすることで、基準をデフォルトの16pxから10pxになるため指定しやすいです。
例えば、1rem=10px 1.6rem=16pxとなります。

ルートの数値を参照するので、入れ子構造にも左右されず、修正するときもemのようにいちいち親要素から計算する必要がありません。​相対値でありながら、参照する場所がずっと固定されているため絶対値のように扱いやすいです。

【注意】Google Chromeには「最小フォントサイズ」が存在するため、remを用いて要素を縮小した場合に中途半端なサイズまでしか小さくできず、レイアウトが崩壊することがあります。Chromeの最小フォントサイズは10pxです。それ以下にならないよう注意しましょう。

全部自動でやってくれるわけじゃないよ

よく勘違いされるのですが、remで指定したからといって、画面が小さくなったら自動でフォントが縮んだりするわけではありません。ちゃんとスマホサイズ時にルートのサイズが変わるよう、CSSに記述してあげてくださいね。

当たり前ですが、スマホでもPCでも大きさが変わってほしくない要素は絶対値で指定しましょう。なんでもかんでも置き換えればいいというわけではないということですね。

では、最初に出したCSSをもう一度見てみましょう

.section_ttl {
   font-size: 2.6rem;　/* 相対値。ルートを参照する。ルートが62.5%なら26px */
   font-weight: bold;　
   text-align: center;
   line-height: 1.2;
   margin-bottom: 40px;　/* 俺の言うことは絶対！スマホでもタブレットでも絶対40px */
   letter-spacing: 0.2em; /* 親要素のフォントサイズを参照する。1emは親要素の一文字ぶん。この場合は親要素のフォントサイズの20%。 */
}

いかがだったでしょうか。レスポンシブには欠かせない単位ですので、px指定に慣れてきたら怖がらずに使ってみてくださいね。

時間ができたらvw、vhについての学習まとめもノートにしたいと思います。