フォントサイズの指定について整理しておきます

こんにちは、ゆんつです。

ホームページをデザインするときに絶対に欠かせないのがフォントサイズ（文字の大きさ）の指定。

このフォントサイズを指定するための単位には様々なものがあります。

プログラミング初心者の僕は何でもpxで指定していたのですが、最近の学習ではフォントサイズを指定することが出来る別の単位がいくつか登場し少し頭が混乱しています。

そこで今日は自分の頭の整理も兼ねて、フォントサイズの指定に良く使われる単位についてまとめておこうと思います。

相対単位と絶対単位

フォントサイズを指定する単位は相対単位と絶対単位に大別されます。

相対単位は「何かを基準にして相対的に大きさを決める単位」です。

例えば親子がいて、子供の身長を表すのに親の身長を基準にして「子供の身長はお父さんの半分」みたいな感じの指定方法です。

絶対単位は「他からの影響を受けずに指定したものがそのまま大きさに直結する単位」のことです。

先ほどの例で言えば、親の身長とは関係なく「子供の身長は120cm」というように、単位がそのままそのものの大きさを表します。

主要な単位を一覧にするとこんな感じです。

実際に使ってみよう

絶対単位を使うケースにはまだ出くわしてないので、相対単位だけに絞って実際に実験してみます。

px（ピクセル）

今までのところ僕が本やオンライン講座などで一番目にした単位です。

pxは相対単位で、基準となるのはユーザーのディスプレイの解像度です。

同じ数値を指定してもディスプレイの解像度によって、表示されるサイズが異なります

とはいってもあまり解像度を気にする必要はないみたいで、絶対単位みたいな使い方でも良いみたいです。

実際pxを絶対単位として分類している本やサイトなどもありました。

  <p id="px1">16px</p>
  <p id="px2">32px</p>
  <p id="px3">48px</p>
　

#px1 { font-size: 16px; }
#px2 { font-size: 32px; }
#px3 { font-size: 48px; }

%（パーセント）

親要素のフォントサイズを基準にします。

100%なら親要素と同じ大きさですし、50%なら半分です。

<div id="percent">
<p id="per1">親要素のフォントサイズの100%なので16px</p>
<p id="per2">親要素のフォントサイズの200%なので32px</p>
<p id="per3">親要素のフォントサイズの50%なので8px</p>
</div>
　

#percent { font-size: 16px; }
#per1 { font-size: 100%; }
#per2 { font-size: 200%; }
#per3 { font-size: 50%; }

複利問題

%でサイズを指定する場合には複利問題に気を付けなければなりません。

要素が入れ子となっている場合には複利計算が行われるのです。

例えば以下のように親、子、孫の関係にある要素があり、親要素のフォントサイズは20px、その子要素と孫要素のfont-sizeを120%に設定した場合

<div id="parent">
  <p>親要素は20px</p>
  <div class="hukuri">
    <p>子要素は20px*120%=24px</p>
    <div class="hukuri">
      <p>孫要素は20px*120%*120%=28.8px</p>
    </div>
  </div>
</div>

#parent { font-size: 20px; }
.hukuri { font-size: 120% }

上記のように複利計算が行われ、入れ子が深くなるほど雪だるま式にフォントサイズが大きくなっていくのが分かります。

常に親要素のフォントサイズを念頭に置いて使う必要がありますね。

em（エム）

親要素のフォントサイズを基準にします。

1emなら親要素と同じ大きさですし、0.5emなら半分です。

要するに親要素のフォントの大きさにemの手前の数字をかけたものがフォントサイズとなります。

emも%同様に複利計算を行いますので留意する必要があります。

<div id="em_parent">
  <p id="em_child1">親要素のフォントサイズの1emなので16px</p>
  <p id="em_child2">親要素のフォントサイズの2emなので32px</p>
  <p id="em_child3">親要素のフォントサイズの0.5emなので8px</p>
</div>
　

#em_parent { font-size: 16px; }
#em_child1 { font-size: 1em; }
#em_child2 { font-size: 2em; }
#em_child3 { font-size: 0.5em; }

rem（レム）

remはホームページの基礎となるhtmlのフォントサイズを基準にします。

htmlは全ての要素の元締めで、木でいえば根っこに相当する部分です。

大元のhtmlのフォントサイズを基準とすることによって、%やemであったような直前の親要素のフォントサイズをいちいち気にする必要はなく、大元のhtmlのフォントサイズだけ把握しておけば良くなりますし、入れ子にした時の複利計算の問題も起こりません。

ちなみにデフォルト状態でのhtmlのフォントサイズは16pxです。

大きさの計算はemと同じ考え方で、1remならhtml要素のフォントサイズと同じ大きさですし、0.5remなら半分です。

<p id="rem_child1">html要素のフォントサイズ(16px)の1remなので16px</p>
<p id="rem_child2">html要素のフォントサイズ(16px)の2remなので32px</p>
<p id="rem_child3">html要素のフォントサイズ(16px)の0.5remなので8px</p>
　

#rem_child1 { font-size: 1rem; }
#rem_child2 { font-size: 2rem; }
#rem_child3 { font-size: 0.5rem; }

キーワードによるサイズの指定

単位によるサイズ指定の他にキーワードによるサイズ指定の方法もあります。

そしてキーワードによるサイズ指定にも絶対サイズ指定と相対サイズ指定の2種類があります。

絶対サイズ指定はブラウザ標準のフォントサイズである16pxをmediumとしてxx-largeからxx-smallまで7段階の調節ができる指定方法です。

相対的サイズ指定は親要素のフォントサイズに対して1段階大きくしたり、小さくしたりする指定方法です。

一覧にするとこんな感じです。

実際に使ってみる

実際に使ってどのように大きさが変化するか見てみましょう。

絶対サイズ指定

mediumのフォントサイズはデフォルトで16px。

mediumのフォントサイズを基準にlarge側のキーワードを使えばフォントサイズは段階的に大きくなりますし、small側のキーワードを使えば段階的にフォントサイズが小さくなります。

  <p id='xx-large'>xx-large</p>
  <p id='x-large'>x-large</p>
  <p id='large'>large</p>
  <p id='medium'>medium</p>
  <p id='small'>small</p>
  <p id='x-small'>x-small</p>
  <p id='xx-small'>xx-small</p>
　

#xx-large { font-size: xx-large; }
#x-large { font-size: x-large; }
#large { font-size: large; }
#medium { font-size: medium; }
#small { font-size: small; }
#x-small { font-size: x-small; }
#xx-small { font-size: xx-small; }

相対サイズ指定

親要素のフォントサイズよりも1回り大きくしたり、1回り小さくしたりできます。

<div id="large-small">
  <p>親要素のフォントサイズは16px</p>
  <p id='larger'>largerは19.2px</p>
  <p id='smaller'>smallerは13.33....px</p>
</div>
　

#large-small { font-size: 16px; }
#larger { font-size: larger; }
#smaller { font-size: smaller; }

他にもまだまだある

一通りまとめてみて文字の大きさを指定するだけでも様々な単位やキーワードがあることが良く分かりました。

上記以外にも最近ではvhやvwなど、フォントサイズの指定に使う単位はまだまだあります。

まだ僕はそれらには遭遇していないので、実際に本やレッスンで遭遇したときに勉強し、それらは追記していこうと思います。

それでは、またー。