Programming from 30

自分の備忘録が、誰かの為になれば・・

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;
}

bodyh1も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を併せて書いておくといいのかと。

まとめ

相対値で計算とかよくわからないと思って敬遠していたrememには使う理由があり、使いやすい方法があります。なんとなくpxが使い易いから使っていましたが、userがいかに見やすくという視点で考えるとpxは使わない方が良さそうですね!

参考: あなたはどれにする?CSSの文字サイズ指定「px、em、%」
ferret
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説