」などサイズの指定方法は様々です。今回は、使い分けがよく分からない、なんとなく感覚で指定してきたなぁ、という方にこれらの単位の違いや使い分けについて詳しくご説明したいと思います。サイズ指定の種類は色々とありますが、大きく分けると2種類しかありません。相対値・・・他の要素を基準にして可変する値ひとまず、これだけ頭に入れておけば以下の説明がすんなり入ってくるかと思います!2.pxについて上でも説明した通り、絶対値とは他の要素に左右されない値の事です。親要素のフォントサイズが何であれ、pxで指定した文字サイズはその影響を受けません。分かりやすく例をあげると、親要素のboxがfont-sizeを20pxと指定していても、子要素のfontの文字サイズは親要素の影響を受けず「15px」で表示されます。15px;}3.%について%は相対値で、親要素を基準にして可変します。以下のような場合、親要素のboxがfont-sizeを26pxと指定していた時、子要素のfontはfont-sizeを50%と指定しています。}%で指定した場合、font-sizeは親要素を基準にするので、26pxの50%で「13px」となります。4.emについて続いてem、こちらは%がマスター出来ていれば簡単です。書き方が異なるだけで考え方としては%と同じ、相対値で親要素を基準として可変します。100%→1em、50%→0.5emに該当します。以下の場合、親要素のboxがfont-sizeを20pxと指定していた時、子要素のfontはfont-sizeは2emと指定しています。}%と同様に親要素を基準として可変するので、20pxの”2em→200%”で「40px」となります。豆知識emの読み方は”エム”5.remについて考え方としてはemや%と同じなのですが、ひとつ違うのが”ルート要素”を基準にして可変するということです。em”の略でroot(ルート)とは”html”を指します。htmlで指定したfont-sizeを基準にして可変するということです。以下のような場合、htmlがfont-sizeを10pxに指定している時、親要素のboxはfont-sizeを16pxに、子要素のfontはfont-sizeを2remに指定しています。}remはhtmlのfont-sizeにのみに影響を受けるので、親要素のboxで指定した16pxには影響を受けません。htmlで指定された10pxの2rem(200%)で「20px」となります。豆知識remの読み方は”レム”6.まとめ今回はフォントサイズの指定の種類についてご紹介しました。絶対値なのか、相対値なのか、そしてどの要素のfont-sizeに影響を受けるのか、これさえ理解出来ればOKです!なんとなくpxしか使ったことがなかったという方にも、挑戦して頂けたらなと思います。思い立って畑違いの業界からWEBの世界へ転職。独学でコーディングを学び、現在はWEBデザインを担当。デザインよりもコーディングが好き!カレーと餃子とじゃがりこ(サラダ)のローテーションで生きています。