HTML の 文字サイズ の 指定 際などに使用する remとemとは

目的

文字サイズの指定などで使用されるremとemは何なのかについてまとめる。

rem

• html要素のfont-sizeを基準にした相対的なサイズの指定単位。
• html要素のfont-sizeが変化すれば自動的にremで指定した各サイズも変更になる。
• ブラウザにより、文字の大きさが変わるために相対的な値で指定する。
• ブラウザや、表示端末の違いを受けにくいなどのメリットがある。
• 1remでhtml要素のfont-sizeと同じサイズになる。
• 2remでhtml要素のfont-sizeの倍のサイズになる。

em

• 親要素のfont-sizeを基準にした相対的なサイズの指定単位。
• 親要素のfont-sizeが変化すれば自動的にemで指定した各サイズも変更になる。
• 単純なデザインのページだとemでもある程度のレスポンシブ対応はできるが、入れ子が乱立すると指定が複雑になってしまう。
• 1remで親要素のfont-sizeと同じサイズになる。
• 2remで親要素のfont-sizeの倍のサイズになる。

remを使いたいけど文字サイズの実感が沸かない。。。

• remを使って文字サイズを指定したいけど1remや2remのサイズはサイズ感に実感が沸かない。
• 1remが10pxとなる設定をすることにより躊躇なくremによるサイズ設定ができるようになる。
• 1remが10pxとなるCSSファイルでの設定方法を下記に記載する。

*/ 下記の設定をCSSファイルの最初に記載する。 /*
html {
 font-size: 62.5%;
}