本業は主にPHPの講師として働いています。
疑問に思い調べたことなどをアウトプットしようと思います。
rem（レム）とは
htmlタグに指定された文字サイズを基準とした単位です（ root em の略）。
root（htmlのこと）のフォントサイズを 1rem とする単位です。
例えば、html要素のフォントサイズが「16px」のときは、1rem = 16px, 2rem = 32px, 3rem = 48px … となります。
html要素のフォントサイズから相対的にサイズ指定できるのがremになります。
親要素の影響を受けないため、個々の要素のサイズ指定を把握しやすく、htmlタグの文字サイズ設定を変更することでサイト全体の文字サイズ調整を行うことが可能です。
他の単位との違い
px（ピクセル）
画面の最小単位である1pxを基準としてサイズを絶対値指定します。
pxを用いる場合のデメリットとしては、例えばスマホの文字などを大きく表示したい等とブラウザの文字サイズ設定を大きく表示させた場合、開発者が指定したpxでしか表示してくれません。
ただpxで幅や高さが絶対値で固定されている要素の中でremを使用する意味はないので、その際は普通にpxで指定するのがいいでしょう。
％（パーセント）
親要素のサイズを基準に割合で指定します。
親要素の文字サイズを基準として300%と指定すると親要素の10pxの300%つまり3倍のサイズで表示されます。
em（エム）
サイズを相対値値指定します。(親要素基準)
フォントや、CSSで指定している文字の大きさによってサイズを相対的に変えられます。
1emはfont-size値を基準とした相対的な値となり、下記のコードを例とした場合は、1emが10pxとなるため、2.5emと記載することで、指定したフォントサイズ10pxの2.5倍で出力されます。
remとの違いは、remはルート要素を基準に対し、emは親要素といった点です。
向いている場面
rem指定が向いている場面については下記の通りです。
レスポンシブ対応などによる端末ごとの文字サイズ指定
rem指定が向いている場面はレスポンシブ対応などによる端末ごとの文字サイズ指定がしやすいです。
画面サイズ（解像度）の小さい端末で見たときの文字サイズ設定のまま、画面サイズの大きな機種で見ると各要素の文字サイズが小さく感じてしまう場合があり、そのような場合でメディアクエリで画面サイズごとに文字サイズの調整を行う時、remでサイト全体の文字サイズを指定していれば、htmlタグの設定サイズを変更するだけで画面幅に応じた調整ができます。
文字サイズの切り替え機能
近年では高齢者や障害者など、心身の機能に関する制約や利用環境等に関係なく、すべての人がウェブで提供される情報を利用できるようにするといったようなウェブアクセシビリティ向上の取り組みがされています。
公共施設や地方自治体などのホームページで設置されていることが多い文字サイズの切り替え（「大」「小」等と表示されている）ボタンを実装する際にもスムーズに対応が可能です。
remを使うときの注意事項
主要なブラウザのデフォルトの文字サイズは16pxです。
そのままremを利用すると
10px = 10 / 16 rem = 0.625 rem
12px = 12 / 16 rem = 0.75 rem
24px = 24 / 16 rem – 1.5 rem
と、キリの悪い数字で設定しにくいというデメリットがあります。
その様な場合はあらかじめ
html {
font-size: 62.5%;
}
と、ルート要素（html要素）のフォントサイズを10pxにしておきます。
これで、
10px = 16 / 10 rem = 1.6 rem
12px = 12 / 10 rem = 1.2 rem
24px = 24 / 10 rem – 2.4 rem
と、わかりやすくなります。
まとめ
remは見た目と利用のしやすさを両立できるサイズの指定方法です。
古いブラウザでは対応されていなかったり、向いていない場面があったり複雑になる場合もありますが、動作環境としてremが使用可能な場合には採用を検討してみるのもいいでしょう！
コメント