LoginSignup
0
1

More than 3 years have passed since last update.

remの使い方

Posted at

remとは

rem(レム)は「root em」の略で、名前のとおり「最上位階層の『em(エム)』」を意味します。

pxとの違い

メリット

pxによるサイズ指定は、主要なグラフィックソフトでWebサイト用デザインを制作する際サイズの単位としてpxが用いられていることもあり、デザインデータとの整合性を取りやすいです。

デメリット

文字サイズを指定すると、ブラウザによってはユーザー操作による文字サイズの拡大/縮小に対応できなかったり、タブレットやスマートフォンなど、高解像度のディスプレイを備える端末で表示をした場合に、端末ごとに見た目の文字サイズが大きく異なって表示(下図)されたりする場合があります。

%との違い

メリット

様々な閲覧環境に対応するため、「%(パーセント)」という単位が用いられるようにより、「80%=親要素の文字サイズの0.8倍」という形で文字サイズを指定することが可能になりました。

デメリット

グラフィックソフトでは文字サイズを%で指定することは少ないため、デザインとの整合性が取りづらく、親要素の文字サイズを基準とした指定になるため、HTMLタグが入れ子構造になっているような箇所では個々の要素の最終的な文字サイズが把握しづらい、という面があります。

コード

html{
  font-size: 62.5%;/* 10px相当 */
}

/* body
----------------------------- */
body{
  font-size: 1.6rem;/* 16相当px */
}

参考

remを使ってCSSの文字サイズ指定

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1