プログラミングの学習ならUdemyがおすすめです!詳細はこちら

CSSのfont-sizeの値[px],[em],[rem]誰でも簡単にわかるように解説

疑問ちゃん

font-sizeの単位にpx,em,remってあるけどどうゆう意味なの?

font-sizeの値について解説していきます。

px,em,remについて

順番に解説していきます。

px

pxとは、ピクセルと呼びます。

1/96インチを1とする単位です。わかりやすく言えば、画面における1ピクセルの値を1とする値です。

pxは絶対値であり、必ず指定したpxサイズで表示されます。

補足
絶対値とは、他の要素に影響されず必ずのその単位で表示されます。

 

em

emとは、エムと呼びます。こちらは、親要素のfont-sizeの値を1とした単位です。

参考 親要素についてWEBログ

親要素については上の記事が参考になると思います。

疑問ちゃん

親要素のfont-sizeの値を1とした単位ってどうゆうこと?

つまり1とした単位と言うのは、100%という意味です。

例を出します。

.sample{
font-size: 32px; 親要素のfont-size
}

.sample>p{
font-size: 0.5em; 50%という意味
}

 

親要素のsampleのフォントサイズが32px。なので子要素の0.5emは1emが100%の32pxなので0.5emは50%になります。

50%と言うことはその半分。16pxになります。

0.1em=10% 0.5em=50% 1em=100%と言うことです。

ちなみにemは、pxと違い相対値になります。

補足
相対値とは、親要素のサイズなどによって可変することです。

またfont-size以外にemを使用した場合、親要素ではなく、その要素のfont-sizeを1とする単位になるので覚えておきましょう。

rem

remは、ルートエムと呼びroot要素のemと言うことです。

【html】DOCTYPEとは?書き方などを初心者にわかりやすく解説

root要素とは、上の記事のhtmlタグの説明をご覧ください。

root要素のemつまりhtmlタグのフォントサイズを1とする単位です。

ブラウザのデフォルトのフォントサイズは16pxです。

つまりどうゆうことか?例を見ていきましょう。

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ということですね。

まとめ

いかがでしたでしょうか?

詳しい使用例などは

参考 あなたはどれにする?文字サイズ指定デザインメモ

が参考になると思います。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です