webページの作成で意外にも欠かせないのが、文字サイズを変更する方法です。見出しタグや本文タグを使いわけることで見た目上の文字のサイズは変更できますが、同じタグでも部分ごとにサイズを変更できるとしたら便利ですよね！
文字サイズを部分ごとに変更する方法とは？
今回は、font-sizeの
・基本的な使い方
・見やすく分かりやすい最適な文字サイズ
・font-sizeをレスポンシブに扱う方法
について説明します。基本の使用例はもちろん、実用的なWebページは全てコピペ使用OK！実際に作成する際の参考にしてみてくださいね。
目次
font-sizeとは
font-sizeの読み方
font-sizeは「フォントサイズ」と読みます。
font-sizeの説明
font-sizeはCSSのプロパティの1つで、CSSファイル内でHTML文書の文字サイズを変更することができます。サイズの指定方法はsmallやlargeなどの他、px（ピクセル）やem（相対単位）、%などで細かく指定することもできます。
font-sizeで利用できる値
font-sizeでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| xx-small x-small small medium(基準値) x-large xx-large xxx-large |
mediumを基準とした、ユーザ規定フォントサイズの絶対的サイズです。 値が1段階上がると、フォントのサイズは1.2倍のサイズになります。 |
| larger smaller |
相対的なサイズを指定し、フォントサイズを1段階拡大、縮小します。 |
| length | 相対的なフォントサイズの指定方法です。 |
| percentage | 元のフォントサイズからの相対値を%で指定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 1 |
| Edge | 12 |
| Firefox | 1 |
| nternet Explorer | 5.5 |
| Opera | 7 |
| Safari | 1 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 1 |
| Android版Chrome | 18 |
| Android版Firefox | 4 |
| Android 版 Opera | 10.1 |
| iOS版Safari | 1 |
| Samsung Internet | 1.0 |
font-sizeの基本的な使い方
font-sizeの使い方
実際にfont-sizeを使用してフォントサイズを指定する場合には、読者が実行するブラウザ環境に配慮する必要があります。例えば、ユーザの基準値からの相対値を利用したサイズ指定の場合は、ブラウザごとにフォントのサイズが異なってしまうからです。
IEでの実行例です。chromeよりも文字サイズが小さく表示されています。
chromeで実行した際の表示例です。Internet Explorerとフォントもフォントサイズも異なっています。
実際に様々な方法を使用してフォントサイズを指定してみました。pxで指定するピクセル値は静的な値なので、ブラウザ環境に依存することなく一定のフォントサイズで表示させることができます。
多くのサイトではこの「px」が普遍的に用いられているため、使用する際はpxで指定するのが良いでしょう。
See the Pen
font-size by rabbittyu (@rabbittyu)
on CodePen.
font-sizeの応用的な使い方
最も最適なフォントサイズとは -SEO対策にもなるフォントサイズ-
実はフォントサイズは適当に設定すればよいわけではありません。Webブラウザではユーザの利便性を向上させるため、より見やすく有益な情報が記載されているサイトを検索結果の上位に表示するからです。これがSEOと呼ばれる仕組みです。
世界中の人が使用するGoogleではSEOを利用したページ表示にフォントサイズも判定基準としているため、最適なフォントサイズを指定することで、有効なSEO対策にもなるのです。
ここで一つ留意してほしいのが、Webサイトはスマートフォンからも、パソコンからも閲覧されているという点です。Webサイトでは見やすくても、スマートフォンでは見にくいサイトにならないよう、「レスポンシブ」なサイトの作成を心がけましょう。
ではレスポンシブなサイトを作成するためのフォントサイズはどうすれば良いでしょうか？方法は簡単！フォントサイズに指定する値を「rem」にするだけです。
remはhtml文書そのものに対する相対値のため、ブラウザに依存せずに表示させることができるのです。ちなみにhtmlのデフォルトフォントサイズは16px。早速レスポンシブなサイトを見ていきましょう。
レスポンシブなサイトにするには、メディアクエリを適用し、画面サイズごとに処理を分けましょう。CSSではまずPC画面用に通常の設定を施し、その後スマホやタブレット用に@media（メディアクエリ）を書き、個別に設定していきます。
実際にサンプルコードを用意したので、画面のサイズを1×→0.5×→0.25×と変えてみてください。レスポンシブに対応できるように設定した部分は、画面のサイズを変えても十分に読めると思います。
See the Pen
font-size レスポンシブ by rabbittyu (@rabbittyu)
on CodePen.
まとめ
今回はCSSでフォントのサイズを設定する【font-size】プロパティをご紹介しました。divタグやwrapperタグで囲うことによって、font-sizeを記述する回数も減るため、HTMLであらかじめタグの使用に注意しておきましょう。
またfont-sizeはSEOにも直結する大事な要素であることも、ご紹介しました。基本の使い方に加えて、以下の二点にも配慮できると良いでしょう。
・font-sizeはブラウザ環境に十分配慮する
・font-sizeをレスポンシブに対応させる場合は、メディアクエリ内に「rem」を使用して記述する
参考文献：
HTML5タグリファレンス：font-size
MDN web docks font-size
レスポンシブ対応するためのCSSの書き方
