疑問ちゃん
font-sizeの値について解説していきます。
px,em,remについて
順番に解説していきます。
px
pxとは、ピクセルと呼びます。
1/96インチを１とする単位です。わかりやすく言えば、画面における１ピクセルの値を１とする値です。
pxは絶対値であり、必ず指定したpxサイズで表示されます。
em
emとは、エムと呼びます。こちらは、親要素のfont-sizeの値を１とした単位です。
参考 親要素についてWEBログ親要素については上の記事が参考になると思います。
疑問ちゃん
つまり１とした単位と言うのは、100%という意味です。
例を出します。
.sample{
font-size: 32px; 親要素のfont-size
}
.sample>p{
font-size: 0.5em; 50%という意味
}
親要素のsampleのフォントサイズが３２px。なので子要素の0.5emは1emが100%の32pxなので0.5emは50%になります。
50%と言うことはその半分。１６pxになります。
0.1em＝10% 0.5em=50% 1em=100%と言うことです。
ちなみにemは、pxと違い相対値になります。
またfont-size以外にemを使用した場合、親要素ではなく、その要素のfont-sizeを１とする単位になるので覚えておきましょう。
rem
remは、ルートエムと呼びroot要素のemと言うことです。
【html】DOCTYPEとは？書き方などを初心者にわかりやすく解説
root要素とは、上の記事のhtmlタグの説明をご覧ください。
root要素のemつまりhtmlタグのフォントサイズを１とする単位です。
ブラウザのデフォルトのフォントサイズは１６pxです。
つまりどうゆうことか？例を見ていきましょう。
html{
font-size: 16px;
}
.sample{
font-size: 32px;
}
.sample> p{
font-size: 0.5rem; 50%という意味
}
先程のemの場合親要素のsampleのfont-sizeを参照していましたが、remの場合root要素を参照するのでfont-sizeは8pxになります。
1remは100%,0.5emは50%=半分なので8pxということですね。
まとめ
いかがでしたでしょうか？
詳しい使用例などは
参考 あなたはどれにする？文字サイズ指定デザインメモが参考になると思います。
