正解は、rem（レム）です。
文字サイズ、悩まされてませんか？
いろんな単位があるけど、結局どれがいいのかワカラナイ！
そんな初心者の方に向けた記事です。
フォントサイズrem（レム）について
私がおすすめする理由と使い方を解説しています。
最後にオススメのCSS勉強法も載せているので、チェックしてみてくださいね☺
文字サイズ指定の単位rem（レム）とは
rem（レム）とは「root em」という意味で、
rootに対して相対的にフォントサイズが指定できます。
rem（レム）は、rootのフォントサイズを１として考える単位です。
rootとはhtmlのことです。
例えば、htmlのフォントサイズが16pxの場合でも、18pxの場合でもremは１となります。
htmlのフォントサイズが16pxの場合は、1rem（レム）は16pxとなり、2rem（レム）は32pxとなります。
このように、常にhtml要素に対して「何倍」という使い方ができます。
コードを見てどのくらいのサイズかが認識しやすく、とても便利です。
必ずやってほしいrem（レム）での文字サイズ指定方法
実は、rem（レム）はそのまま使っても使い勝手が悪いんです。
16px = 1rem だとしても
12px = ??remと、細かい調整に向いてないからです。
そこで！
rem（レム）の値を計算しやすくするために、
htmlの基本文字サイズを10pxになるように変更します。
html{
font-size: 62.5%;
}
１rem = 10px なので
12px = 1.2rem という計算が出来るようになりました！
なぜhtmlのフォントサイズが62.5%なのか
16pxの62.5%が10pxだから。です。
もともとのブラウザの設定で、フォントサイズは16pxに設定されています。
フォントサイズを10pxにして計算しやすいするために、62.5%という数字が急に出てきたんですね。
rem（レム）での文字サイズ指定のメリット
rem（レム）は一括でフォントサイズ調整が可能
rem（レム）はデバイスごとのサイズ指定がカンタン
通常は16pxだけど、スマホのときはもう少し大きくしたいな
やっぱりタブレットの文字サイズが大きすぎるから変えたいわ
上記の場合は、メディアクエリごとにサイズを書き換えればokです。
@media screen and (min-width: 721px) {
html {
font-size: 80%;
}
}
@media screen and (max-width: 720px) {
html {
font-size: 62.5%;
}
}
remの間違った使い方と注意
ブラウザ設定でフォントサイズを変更するとremも変わる
rem（レム）の値も変わってしまいます。これには注意が必要です。
古いブラウザには対応していない
IE8以前には対応してないようですので案件での使用に関しては注意が必要です。
CSSの勉強を効率的に独学する方法！
レスポンシブの文字サイズはどの単位がいい？【1秒後に正解発表】の まとめ
今回説明したように、デバイス変化に柔軟な単位としてremを紹介させていただきました。
デザインの崩れやフォント落ちなど、目をつぶれないことについてもカンタンに対応できるので、
コーディングが計画通りに進むことと思います。
文字サイズ指定の単位rem（レム）とは
rem（レム）とは「root em」という意味で、
rootに対して相対的にフォントサイズが指定できます。
rem（レム）は、rootのフォントサイズを１として考える単位です。
rootとはhtmlのことです。
例えば、htmlのフォントサイズが16pxの場合でも、18pxの場合でもremは１となります。
htmlのフォントサイズが16pxの場合は、1rem（レム）は16pxとなり、2rem（レム）は32pxとなります。
このように、常にhtml要素に対して「何倍」という使い方ができます。
コードを見てどのくらいのサイズかが認識しやすく、とても便利です。
必ずやってほしいrem（レム）での文字サイズ指定方法
実は、rem（レム）はそのまま使っても使い勝手が悪いんです。
16px = 1rem だとしても
12px = ??remと、細かい調整に向いてないからです。
そこで！
rem（レム）の値を計算しやすくするために、
htmlの基本文字サイズを10pxになるように変更します。
html{
font-size: 62.5%;
}
１rem = 10px なので
12px = 1.2rem という計算が出来るようになりました！
なぜhtmlのフォントサイズが62.5%なのか
16pxの62.5%が10pxだから。です。
もともとのブラウザの設定で、フォントサイズは16pxに設定されています。
フォントサイズを10pxにして計算しやすいするために、62.5%という数字が急に出てきたんですね。
rem（レム）での文字サイズ指定のメリット
rem（レム）は一括でフォントサイズ調整が可能
rem（レム）はデバイスごとのサイズ指定がカンタン
通常は16pxだけど、スマホのときはもう少し大きくしたいな
やっぱりタブレットの文字サイズが大きすぎるから変えたいわ
上記の場合は、メディアクエリごとにサイズを書き換えればokです。
@media screen and (min-width: 721px) {
html {
font-size: 80%;
}
}
@media screen and (max-width: 720px) {
html {
font-size: 62.5%;
}
}
remの間違った使い方と注意
ブラウザ設定でフォントサイズを変更するとremも変わる
rem（レム）の値も変わってしまいます。これには注意が必要です。
古いブラウザには対応していない
IE8以前には対応してないようですので案件での使用に関しては注意が必要です。
レスポンシブの文字サイズはどの単位がいい？【1秒後に正解発表】の まとめ
今回説明したように、デバイス変化に柔軟な単位としてremを紹介させていただきました。
デザインの崩れやフォント落ちなど、目をつぶれないことについてもカンタンに対応できるので、
コーディングが計画通りに進むことと思います。
この物語はフィクションです
コメント