[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
Post on:2015年6月5日
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
CSSでのフォントサイズの指定方法
CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値(absolute)と相対値(relative)の二つです。
- 絶対値(absolute)
- 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。
- 相対値(relative)
- 相対値はサイズ自体の値を持っていません。サイズは親要素のサイズによって決定されます。依存する親要素のサイズが変わると、それに応じてサイズが変わります。
絶対値での指定は主に「px」が使用され、相対値での指定は主に「%, em」が使用されます。また最近では「rem, vw, vh」も多く使用されています。
フォントサイズを指定する単位の一覧
CSSで使用する単位の詳しいリストは、下記ページで見ることができます。
各指定方法の特徴
これら複数の単位の違いを概念的に理解するのは難しいことです。しかし、実例でみるとその特徴が簡単に分かります。
Example 1: ブラウザのデフォルト
まずは何も書いていないHTMLファイルに、フォントサイズを指定しないでテキストを配置してみてください。そこに表示されたのがブラウザのデフォルトの設定です。ほとんどのブラウザでは、htmlとbodyタグのフォントサイズは100%で表示されます。
1 |
100% = 1em = 1rem = 16px = 12pt |
※ブラウザのデフォルトのフォントサイズと各単位の関係性を現したものです。
1em=16px, 1rem=16px という意味ではありません、em ,remについては下記の「remとem」で。
これは例えば、pタグのフォントサイズに100%を指定した場合には、フォントが16pxのサイズで表示されるということです。
ブラウザのデフォルトでの表示
Example 2: 絶対値と相対値
絶対値と相対値の違いは、htmlタグのフォントサイズを変えることで簡単に理解できます。「html{font-size: 200%}」に指定すると、相対値を使ったフォントだけ影響を受けます。
相対値を使ったフォントだけ影響を受ける
このことは相対値を使う際の重要なポイントです。フォントサイズを簡単に調整できるので、レスポンシブ対応のサイトにも利用できます。
レスポンシブ用の簡単で便利なフォントサイズの指定方法は、下記のデモを見てみてください。
Example 3: remとem(そして%)
em(そして%)の単位は、親要素のフォントサイズに基づいて自身のフォントサイズを計算して機能します。
例えば、こんな感じです。
1 2 3 4 5 6 7 8 9 10 |
html { font-size: 100% /* =16px */ } body { font-size: 2em; /* =32px */ } p { font-size: 1em; /* =32px */ /* font-size: 0.5em; =16px */ } |
bodyの「2em」は、親要素であるhtmlを継承するので「32px」になります。
pの「1em」は、親要素であるbodyの値を継承するので「32px」になります。
フォントサイズの単位にemを使った例
フォントサイズの指定にemを使った場合には、親要素すべてのフォントサイズを考慮しなければなりません。このことはフォントサイズの指定が複雑になってしまうことがあります。
この問題を解決する一つの方法は、単位にremを使うことです。remはhtmlのみのフォントサイズに基づいて計算されます。親要素ではないということです。
1 2 3 4 5 6 7 8 9 |
html { font-size: 100% /* =16px */ } body { font-size: 2rem; /* =32px */ } p { font-size: 1rem; /* =16px */ } |
bodyの「2rem」は、htmlを継承するので「32px」になります。
pの「1rem」は、親要素であるbodyの値ではなく、htmlを継承するので「16px」になります。
Example 4: vwなどのCSS3の新しい単位
vw, vhはCSS3の新しい単位で、ビューポートの幅、高さに基づいてサイズを計算します。これを利用することでレスポンシブ用のサイズを決めることができます。しかしこの値はあまりにも大きいため、フォントサイズを制御するにはあまりうまく機能しません。
レスポンシブに適したフォントサイズの指定方法
私はこのフォントサイズのスタディをするまでは、単にpxを使ってフォントサイズを指定するだけでした。これはユーザーがブラウザの機能を使って文字を拡大すれば問題ないと思っていたからです。
しかし、この方法には問題があることが分かりました。私が指定したサイズではスマホやタブレットではちょうど良く見えますが、それより大きいスクリーンには適していません。例えユーザーが拡大する手段を持っているとしても、それをする必要があることを強いることはできません。
私はpxでの指定をやめ、remを使ったフォントサイズの指定に変えました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
html { font-size: 62.5%; /* sets the base font to 10px for easier math */ } body { font-size: 16px; font-size: 1.6rem; /* sets the default sizing to make sure nothing is actually 10px */ } h1 { font-size: 32px; font-size: 3.2rem; } |
フォントのサイズを大きくする時には、htmlの値を変えます。
これで、見出しや文章のサイズも大きくなります。
1 2 3 4 5 |
@media screen and (min-width: 1280px) { html { font-size: 100%; } } |
remの前にpxを使用しているのは、IE8がremをサポートしていないためです。
sponsors