fontsize調整 ー rem,em,px,%について備忘録

fontsize　rem,em,pxについてまとめた

CSSを使っていてpxのみで乗り切っていたので、remやemについても勉強したので備忘録として

まずは二つの指定方法

• 絶対値（absolute）
  他の要素には影響を受けず１６pxと指定したら１６px!!!!!!

• 相対値（relative） 親要素のサイズにより変わります！親の値が変わったら子要素の文字サイズも変わります！

ブラウザのデフォルトサイズは 100% = 1em = 1rem = 16px = 12pt

pxについて（絶対値）

恐らく一番馴染みが深いと思います！

html{
fontsize:100%;  
}  
body{
fontsize:16px;
}    
h1{
fontsize:16px;
}

bodyもh1も１６pxで表示されます！１６pxだったら１６pxですね！

emについて （相対値）

html{
fontsize:100%;   =16px
}  
body{
fontsize:2em;
}    
h1{
fontsize:1em;
}

親要素に対して変わるとお話ししました！親のhtmlの100%は１６pxなので、その２倍の３２px！h1の親はbodyです。bodyが３２pxなので１倍なので３２pxです！

remについて

html{
fontsize:100%;  =16px
}  
body{
fontsize:2rem;
}    
h1{
fontsize:1rem;
}

remは親要素ではなくhtmlのサイズが基準です！なのでbodyは３２pxで、h1は１６pxです。なんとなくわかってきました！

注意

今までは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]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説