htmlcss スクリーンサイズに合わせてフォントサイズを変更

2013年9月19日

スクリーンサイズに合わせてフォントサイズを変更方法のメモ。フォントサイズや余白を「em」で指定して、メディアクエリーを使って、対応するスクリーンサイズの font-size を記述する。

px 単位の値を em に変換

レスポンシブなサイトを作成する際に、スクリーンサイズに合わせてフォントサイズも変えるには、全ての要素のフォントサイズや余白をスクリーンサイズごとに記述するのは大変なので、以下を全て「em」という単位で指定する。

  • font-size
  • レイアウトの上下の margin
  • レイアウトの上下の padding

em は基準となる font-size によって実際の表示サイズが変わるので、em で指定しておけば、html 要素の font-size を変更するだけで子要素(html 要素以下の全ての要素)の指定値が連動して変更される。

em
適用する要素の font-size プロパティの値を 1 とする大きさ。
親要素に対して相対的なフォントサイズの単位。
親要素の「font-size」プロパティの値を基準とし、親要素がないときはブラウザの規定値を基準とする。
font-size プロパティで使用するときは親要素の font-size プロパティの値が 1 になる。

px 単位の値を em に変換するには、以下の計算式を使う。

em に変換したい px 値 ÷ 基準となる font-size の px 値

1em の基準となる font-size がスタイルシートの「プロパティによって異なる」ので注意が必要。

h1 {
    font-size : 48px; 
    line-height : 1;
    margin-bottom: 24px;
}

上記を em で書き直すと以下のようになる。

h1 {
    font-size : 3em;   /* 48px */
    line-height : 1;   /* 48px */
    margin-bottom: 0.5em;   /* 24px */
}
  • font-size を em 単位で指定すると、1em は親要素の font-size が基準になる。
  • h1 の親要素は html 要素で、ブラウザの標準フォントサイズは 16px
  • font-size プロパティで指定する em は「1em = 16px」になる。
  • 一方、margin や padding では、その要素の font-size が 1em の基準になる。
  • h1 の font-size は 3em で px に変換すると 48px なので、h1 の margin-bottom に 0.5em を指定すると 24px になる。
h2 {
    font-size : 36px; 
    line-height : 1.3333;   /* 48px (48÷36=1.3333)*/
    margin-bottom: 24px;
}

上記を em で書き直すと以下のようになる。

h2 {
    font-size : 2.25em;   /* 36px */
    line-height : 1.3333;   /* 48px */
    margin-bottom: 0.6667em;   /* 24px */
}
  • font-size に指定する 1em の基準は、h1 同様 html 要素の font-size(16px)なので、
    36px / 16px = 2.25em
  • margin-bottom に指定する 1em の基準は h2 の font-size である2.25em(36px)なので、
    24px / 36px = 0.6667em

px 単位の指定を全て em 単位に書き換える例

h1 {
    font-size : 3em; /* 48px */
    line-height : 1; /* 48px */
    margin-bottom : 0.5em;
} 

h2 {
    font-size : 2.25em; /* 36px */
    line-height : 1.3333; /* 48px */
    margin-bottom : 0.6667em;
} 

h3 {
    font-size : 1.5em; /* 24px */
    line-height : 1; /* 24px */
    margin-bottom : 1em;
} 

hgroup h2,h4,h5,h6 {
    font-size : 1em; /* 16px */
    line-height : 1.5; /* 24px */
    margin-bottom : 1.5em;
} 


header { 
    text-align : center;
    padding-top : 1.5em; /* 24px */
}

header h1 { 
    margin-bottom : 0.5em;  /* 24px */
    /*h1 の基準font-size は48pxになっている*/
}

nav ul li a {
    display : block;
    padding : 0.75em 0;  /* 12px 0*/
}

footer {
    padding : 1.5em 0;  /* 24px 0*/
    text-align : center;
}

メディアクエリーで基準フォントサイズを変更

  • スマートフォンなどは、手に持って操作するため比較的小さなフォントでも問題ない。
  • デスクトップPCやテレビでは大き目のフォントサイズを設定する。
目安となる font-size
デバイス font-size
スマートフォン 12px 以上(12px~14px)
タブレット端末(768px以上) 14px 以上
デスクトップ(1024px以上) 16px 以上

デバイスごとの html 要素の font-size が決まったら、メディアクエリーを使って、対応するスクリーンサイズの font-size を記述する。

メディアクエリー内の font-size は px 単位で指定しても % 単位で指定しても良い(% 単位の方が直感的)

html 要素の font-size は、ブラウザの標準フォントサイズである 16px を基準に以下のように計算できる。(下記の値は厳密な値ではないのでサイトの条件等により適宜変更する)

  • 画面幅 767px 以下:12px or 12(px) ÷ 16(px) x 100 = 75%
  • 画面幅 768px 以上:14px or 14(px) ÷ 16(px) x 100 = 87.5%
  • 画面幅 1024px 以上:16px or 16(px) ÷ 16(px) x 100 = 100%

ベースの CSS とメディアクエリー内のフォントサイズの指定を以下のように記述する。

% 指定

html {
    font-size : 75%; 
}

@media screen and (min-width : 768px){
    html{ font-size : 87.5%;} 
}

@media screen and (min-width : 1024px) {
    html{ font-size : 100%}; 
}

px 指定

html {
    font-size : 12px; 
}

@media screen and (min-width : 768px){
    html{ font-size : 14px;}
}

@media screen and (min-width : 1024px) {
    html{ font-size : 16px;} 
}

rem での指定

rem (root em)
ルート要素(html 要素)に対する相対的なフォントサイズの単位

em は親要素の大きさが基準になるのに対して、rem は常に root 要素(つまり html 要素)の大きさを基準にする。html 要素のフォントサイズを変更しない限り、ブラウザーのデフォルトである「1rem=16px」という値は一定。

(注意) html 要素に「font-size: 62.5%;」と指定し、「10px = 1rem」として、px 単位で計算して使用する方法とは異なり、以下は html 要素のフォントサイズは 100% (1rem=16px)の場合の例。

px 単位での指定

h1 {
    font-size : 48px; 
    line-height : 1;
    margin-bottom: 24px;
}

em 単位での指定

h1 {
    font-size : 3em;   /* 48px */
    line-height : 1;   /* 48px */
    margin-bottom: 0.5em;   /* 24px */
}

rem 単位での指定

h1 {
    font-size : 3rem;   /* 48px */
    line-height : 1;   /* 48px */
    margin-bottom: 1.5em;   /* 24px */
}

但し、IE6~IE8 は rem をサポートしていないので、フォールバックとして以下のような記述を追加する必要がある。また、IE6~IE8 はメディアクエリーもサポートしていないため、フォールバックはメディアクエリーの外側に記述する必要がある。

h1 {
  font-size : 48px;  /* フォールバック */
  font-size : 3rem; /* 48px */
  line-height : 1; /* 48px */
  margin-bottom : 24px;  /* フォールバック */
  margin-bottom : 1.5rem;
}

rem 単位での指定の例

h1 {
  font-size : 48px;
  font-size : 3rem; /* 48px */
  line-height : 1; /* 48px */
  margin-bottom : 24px;
  margin-bottom : 1.5rem;
} 

h2 {
  font-size : 36px;
  font-size : 2.25rem; /* 36px */
  line-height : 1.3333; /* 48px */
  margin-bottom : 24px;
  margin-bottom : 1.5rem;
 } 

h3 {
  font-size : 24px;
  font-size : 1.5rem; /* 24px */
  line-height : 1; /* 24px */
  margin-bottom : 24px;
  margin-bottom : 1.5rem;
 } 

hgroup h2,h4,h5,h6 {
  font-size : 16px;  
  font-size : 1rem; /* 16px */
  line-height : 1.5; /* 24px */
  margin-bottom : 24px;
  margin-bottom : 1.5rem;
 }