0

【初心者向け】はじめてのCSS ~第4話~ フォントサイズと単位について

【初心者向け】はじめてのCSS ~第4話~ フォントサイズと単位について

前回の記事「【初心者向け】はじめての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を記述

HTMLを記述

▼プレビュー確認

【px指定】の場合

 

【pt指定】の場合

CSSを記述

HTMLを記述

▼プレビュー確認

【pt指定】の場合

 

em / % / rem (相対値)で指定する場合の例

em(エム)と%は、親要素のフォントサイズを継承して指定されます。
rem(レム)は、html要素を基準にして指定されます。

※rem(root em)の略

【em指定の場合】

CSSを記述

HTMLを記述

▼プレビュー確認

【em指定の場合】

 

【rem指定の場合】

CSSを記述

HTMLを記述

▼プレビュー確認

【rem指定の場合】

※常にhtml要素が基準になります。

まとめ

デバイスによりピクセル比が違うことがあるので、iPhoneやAndroid、iPadやKindle、またタブレット端末の機種などにより「デフォルト:16px」の見え方に違いが出てしまうことがあるのはこのためです。そういった理由により、以前は「px」指定が主流でしたが最近は「 em / rem / % 」指定をする流れが主流になってきています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 【初心者向け】はじめてのCSS ~第4話~ フォントサイズと単位について