只今、PHPを学習しております

(CSS)フォントサイズの単位 px / em / rem の違い

トッド

CSSには色々な単位がありますよね
px em rem という単位は頻繁に見かけるけど、その違いってなんだろう?

多くのブラウザでは簡易的なCSSスタイルがあらかじめ施されています。その中でもフォントサイズは基本的に16pxで指定されていることが多く、ピクセル(px)単位はCSSの絶対単位という位置付けとなっており em / rem が示す値の基準となる単位として扱われます。

px単位は特に難しいところは無く、CSSにおける標準的な単位なんだと解釈しておけば良いでしょう。

トピックの中心となるのは em / rem という単位です。 CSSのコードを触る機会があると頻繁に見かけるこの em / rem という単位ですが、何となく使っている人も多いのではないでしょうか?

まずは、em / rem の共通点から探っていきましょう。

em / rem の共通点は「とある要素のフォントサイズを元に値を抽出する」という点が挙げられます。

どちらの単位も、その比率(1n / 2n …x)は同じであり数値の元になる基準値を見に行く場所が異なると言えば分かりやすいでしょうか。

em を使った単位を指定した場合は、親要素で指定されている font-size に対応した値を出力します。

上記画像のサンプルでは、body > div > p という階層構造を持ったHTMLで説明していますが、div 要素を親にもつ p 要素内では font-size が 2em と指定してあります。結果として出力される値は 32px ということになります。

これは、親要素である div 要素内で font-size が 16px と指定されているからです。

もしも、直近の親要素内で font-size が指定されていない場合は、その一つ上の階層にある font-size を見にいきます。

という流れが続いていくことになる単位が em になります。

次に rem について見ていきましょう。要領は em と同じなんですが、コレまた見にいく場所が異なるんですね。

rem を使った単位を指定した場合は、ルート要素(<html>)で指定されている font-size に対応した値を出力します。

同じく上記画像にてサンプルを用意しました。サンプルでは、 html > body > div > p という階層構造を持ったHTMLで説明しています。

先ほどの em の場合は直近の親要素に当たる要素内で指定された font-size の値を元に em で値を出力していましたが、rem の場合はルート要素を見にいくので直近の親要素の font-size の指定の有無に関係なくルート要素内で指定されている font-size の値を使って値を出力します。

もし、ルート要素(<html>)で font-size が指定されていなかった場合はブラウザCSSのデフォルト値が適応されます。

上記サンプルでは、p 要素にて、font-size が 1rem となっており、ルート要素では font-size を指定していないので、結果としてデフォルト値の 16px を参照した 1rem = 16px の値が出力されることになります。

単位 em / rem まとめ
  • em / rem ともに「とある要素のフォントサイズに対応した値を出力する」

  • em は直近の親要素内で指定されている font-size の値に対応した値を出力する

  • rem はルート要素(<html>)内で指定されている font-size の値に対応した値を出力する

最後に rem の r はルート要素(root)の r です。

コメントを残す

メールアドレスが公開されることはありません。