前回の記事「【初心者向け】はじめてのCSS ～第3話～ ウェブセーフカラーについて」にて、ウェブセーフカラーについて記述しましたが、今回は「フォントサイズとその単位」について解説していきたいと思います。
フォントサイズの単位
「 px / em / rem / % 」などが主に使用されれる単位ですが、その他にも「ex / cm / mm / in / pt / pc / ch / vh / vw / vmin / vmax 」などがあります。
各ブラウザのデフォルトフォントサイズ
フォントサイズの指定を何もしない状態で、ブラウザに表示されるp要素のフォントサイズがそのブラウザの「デフォルトフォントサイズ」になります。実は、OSやブラウザの種類、バージョンによってこのデフォルトフォントサイズが微妙に違います。主に多いものが、デフォルト「16px」ですが、MacのFirefoxの古いバージョンなどは「14px」であったりしますので、注意が必要です。
フォントサイズの指定方法
CSSを用いてフォントサイズを指定する方法の種類には大きく2つあります。
1つは「絶対値 ( absolute ) 」で指定、もう1つは「相対値 ( relative ) 」で指定という2種類。
絶対値 ( absolute ) とは
px / pt のように、指定されたサイズ「16px / 18pt」がそのまま（絶対値として）反映されます。
相対値 ( relative ) とは
em / % / rem のように、要素の親要素にあたるbody要素やhtml要素を基準に（相対値として）サイズが決まります。
基本的には、以下のような法則でフォントサイズは整理されていますが、相対値で指定するものに関しては親子関係が影響してきますので念頭に入れておくようにしましょう。
100% = 1em = 1rem = 16px = 12pt
px / pt (絶対値)で指定する場合の例
pxとptは、固定された絶対値で指定されます。
【px指定】の場合
CSSを記述
|
1 2 3 |
.fs12{font-size:12px;} .fs16{font-size:16px;} .fs20{font-size:20px;} |
HTMLを記述
|
1 2 3 |
<p class="fs12">フォントサイズが12pxです</p> <p class="fs16">フォントサイズが16pxです</p> <p class="fs20">フォントサイズが20pxです</p> |
▼プレビュー確認
【pt指定】の場合
CSSを記述
|
1 2 3 |
.fs12p{font-size:12pt;} .fs16p{font-size:16pt;} .fs20p{font-size:20pt;} |
HTMLを記述
|
1 2 3 |
<p class="fs12p">フォントサイズが12ptです</p> <p class="fs16p">フォントサイズが16ptです</p> <p class="fs20p">フォントサイズが20ptです</p> |
▼プレビュー確認
em / % / rem (相対値)で指定する場合の例
em(エム)と%は、親要素のフォントサイズを継承して指定されます。
rem(レム)は、html要素を基準にして指定されます。
※rem(root em)の略
【em指定の場合】
CSSを記述
|
1 2 3 4 |
html{font-size: 100%;}←(親要素:html)のフォントサイズが100%=16pxの場合 body{font-size: 2em;}←2em=32pxとなり(子要素:body) p{font-size: 1em;}←(親要素:body)に対し1em=32px(子要素:p)となります p.fs16{font-size:16px;} |
HTMLを記述
|
1 2 3 4 |
<body> <p>フォントサイズが1emです</p> <p class="fs16">フォントサイズが16pxです</p> </body> |
▼プレビュー確認
【rem指定の場合】
CSSを記述
|
1 2 3 4 |
html{font-size: 100%;}←(基準要素:html)のフォントサイズが100%=16pxの場合 body{font-size: 2rem;}←2rem=32pxとなり p{font-size: 1rem;}←1rem=16pxとなります p.fs16{font-size:16px;} |
HTMLを記述
|
1 2 3 4 |
<body> <p>フォントサイズが1remです</p> <p class="fs16">フォントサイズが16pxです</p> </body> |
▼プレビュー確認
※常にhtml要素が基準になります。
まとめ
デバイスによりピクセル比が違うことがあるので、iPhoneやAndroid、iPadやKindle、またタブレット端末の機種などにより「デフォルト：16px」の見え方に違いが出てしまうことがあるのはこのためです。そういった理由により、以前は「px」指定が主流でしたが最近は「 em / rem / % 」指定をする流れが主流になってきています。