概要
CSSでのフォントサイズ指定に使用できる単位にはいろいろなものがあります。
その中でも、先日初めてremを使用する機会があったので、学びの整理として記事にまとめたいと思います。
remとは
ルート要素のフォントサイズを1とした時の相対的なサイズ指定を表します。
ルート要素についての記述は以下のとおりです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/html
<html> は HTML 要素で、 HTML 文書においてルート (基点) となる要素 (最上位要素) であり、ルート要素とも呼ばれます。他のすべての要素は、この要素の子孫として配置しなければなりません。
つまり、<html>に指定されているフォントサイズを1とした時の相対的な文字サイズを表すのがremです。
例
以下のように、<html>に10pxを指定したとします。
html {
font-size: 10px;
}
では、この場合以下のpタグのフォントサイズはいくつになるでしょうか。
p {
font-size: 1.5rem;
}
答えは 10px * 1.5 = 15px になります。
応用編その1
remを使用するとこんなことができます。
以下のように<html>のフォントサイズをvwで指定してみます。
html {
font-size: 10vw;
}
vwはビューポートの幅(画面幅)から見たサイズの相対値指定です。
1vwはビューポートに対して1%の大きさで表示されることを表します。
上記の指定をすることにより、ルート要素のフォントサイズが画面幅によって変わるようになります。
この状態でpタグのフォントサイズをrem指定するとどうなるでしょうか。
p {
font-size: 1.5rem;
}
前述の通り、1.5remはルート要素のフォントサイズの1.5倍を表しますが、今回はルート要素のフォントサイズが画面幅によって変わるため、pタグのフォントサイズも連動して変わってくれるようになります。
これにより、画面幅によってフォントサイズを流動的に変えることができるようになりました。
応用編その2
上記の例(応用編その1)にもう少し手を加えてみましょう。
応用編その1で画面幅と連動してフォントサイズを変更できるようになりましたが、
これでは小さな端末で画面を見たときに、文字が読めないくらい小さくなってしまう可能性があります。
また、逆に画面幅の大きなデバイスで見たときに、フォントサイズが必要以上に大きくなってしまう可能性もあります。
この現象を防ぐために、clamp関数を使用してみます。
html {
font-size: clamp(10px, 10vw, 20px);
}
clamp関数では、サイズの最小値と最大値を指定することができます。
日本語で書くと以下のような感じです。
clamp(最小値, 表示したい文字サイズ, 最大値);
つまり、上記の例だと
「ルート要素のフォントサイズは10vwになる。ただし、10pxより小さくならないし20pxよりも大きくはならない」
という指定を入れることができます。
この状態で要素の文字サイズをrem指定してみましょう。
p {
font-size: 1.5rem;
}
これによって、
「pタグのフォントサイズは15vwになる。ただし、15pxよりも小さくならないし30pxよりも大きくならない」
という風に指定ができました。
つまり、文字サイズ変動の下限値と上限値を指定することによって、よりユーザーにとって見やすい文字サイズを実現することが可能になります。
感想
相対値でフォントサイズ指定をする方法は他にもありますが、remを使用すると参照先がルート要素のフォントサイズになってわかりやすいのがいいなと感じました。
個人的には普段フロントを触る機会があまりないので、フォントサイズについて学ぶいいきっかけになったのが嬉しかったです。