fontsize調整 ー rem,em,px,%について備忘録
fontsize rem,em,pxについてまとめた
CSSを使っていてpx
のみで乗り切っていたので、remやemについても勉強したので備忘録として
まずは二つの指定方法
絶対値(absolute)
他の要素には影響を受けず16pxと指定したら16px!!!!!!相対値(relative) 親要素のサイズにより変わります!親の値が変わったら子要素の文字サイズも変わります!
ブラウザのデフォルトサイズは 100% = 1em = 1rem = 16px = 12pt
pxについて(絶対値)
恐らく一番馴染みが深いと思います!
html{ fontsize:100%; } body{ fontsize:16px; } h1{ fontsize:16px; }
body
もh1
も16pxで表示されます!16pxだったら16pxですね!
emについて (相対値)
html{ fontsize:100%; =16px } body{ fontsize:2em; } h1{ fontsize:1em; }
親要素に対して変わるとお話ししました!親のhtml
の100%は16pxなので、その2倍の32px!h1
の親はbodyです。bodyが32pxなので1倍なので32pxです!
remについて
html{ fontsize:100%; =16px } body{ fontsize:2rem; } h1{ fontsize:1rem; }
remは親要素ではなくhtmlのサイズが基準です!なのでbody
は32pxで、h1
は16pxです。なんとなくわかってきました!
注意
今まではpxを使っていましたが、pxには問題点がいくつかあります。
- IE9以前がpx指定された文字の拡大ができない
- ブラウザによって文字が大きさが変わって
それではどれを使うのが正なのか・・・
多くのサイトでオススメしているのはremを使ってhtml
の値を62.5%にすること。
html{ fontsize:62.5%; =10px } body{ fontsize:1.6rem; =16px } h1{ fontsize:3.2rem; =16px }
デフォルト設定が1em=16px
の場合に14pxの文字を出すのに計算が面倒臭くなってしまいます。その為大元の基準を62%= 10px
にしておくととても計算しやすくなりますね!
※どこまでサポートするかですが、IE8がremをサポートしていないので、pxを併せて書いておくといいのかと。
まとめ
相対値で計算とかよくわからないと思って敬遠していたrem
や em
には使う理由があり、使いやすい方法があります。なんとなくpx
が使い易いから使っていましたが、userがいかに見やすくという視点で考えるとpxは使わない方が良さそうですね!
参考:
あなたはどれにする?CSSの文字サイズ指定「px、em、%」
ferret
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説