CSSでフォントサイズなどを設定するときにpxを使用している人が多いと思いますが、今回はemとremの単位に着目していきたいと思います。
Contents
em・remとは
emやremはcssで相対的にサイズ指定をする際に使用します。
emとremは相対的にサイズを指定する際に、基準となるHTML要素が必要になります。
emは親要素を基準として相対的にサイズを指定します。
remは<html>要素を基準として相対的にサイズを指定します。
em・remを使用するメリット
なぜ一般的に多く使用されているpxを使用しずに、emやremを使うのかというと、pxだと見る端末によってサイズが変わってしまうからです。
具体的には、pcで見ている14pxはいい感じの大きさで見やすいですが、同じ14pxでもスマートフォンやタブレットで見ると小さく感じてしまうなどの問題が起きてしまいます。
その問題を解決するために使用されるのがem・remなのです。
emの使い方
emは親要素を基準として相対的にサイズを指定します。
＜body＞（親要素）にfont-sizeを設定していれば、その下の子要素にemを指定することで親要素（この場合＜body＞要素）の何倍かを設定できる。
親要素に何も指定がない場合は、html要素のfont-size値が基準になる。
- 親要素に何もフォントサイズを指定していない場合１em = 16px(ブラウザの標準サイズ)
- 親要素のfont-sizeを基準に計算される
下の例の場合だと＜body＞要素に14pxが設定してあり、それが基準になっている為
h1のサイズは2em(2×14px)で28pxになる。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
remの使い方
remは<html>要素(ルート要素)を基準として相対的にサイズを指定します。
基準となる<html>要素(ルート要素)のデフォルトが16pxなので、16pxが基準になっています。
remは親要素の影響を受けないので、基準は一定になります。
- １em = 16px(ブラウザの標準サイズ)
- 親要素の影響を受けない
下の例の場合は<html>要素(ルート要素)の16pxが基準になっている為
h1のサイズは2rem(2×16px)で32pxになる。
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
まとめ
まだ私自身、emやremを使いこなせていないので、これを機に皆さんと一緒に使いこなしていけたらと思います。
