2016/12/01
ゼロからWordPressでブログを作ってみよう！第5回：CSSプロパティ2（文字サイズ指定）
5.CSSプロパティ2（文字サイズ指定）
htmlを装飾するCSSのプロパティについて。
今回は文字サイズの指定についての説明です。
文字サイズの指定（font-size）
文字の大きさを指定するプロパティです。
ひょっとしたら「あれ？文字の大きさってfontタグで指定するものじゃなかったっけ？」と思う方もいるかも知れません。
確かに以前（html4/xhtmlの時代）はfontタグで指定することもできましたが、現在fontタグは廃止されたのでこのプロパティで行います。
指定する値
px指定が基本になります。
他にも相対的に指定する方法があり、%、em、rem、vw/vhなど様々な単位が使えます。
先に簡単なpx指定の書き方です。
pxの指定方法（絶対値の指定）
表示したいピクセル数で指定します。
- font-size:14px（文字サイズを14pxにする）
pxで指定する場合、何にも依存しない為固定のピクセルサイズ（この場合は14px）で表示されます。
これを「絶対値の指定」と呼びます。
あらかじめデザインでサイズが決まっていて、パソコンやスマートフォンでサイズを変えない、と決まっていればpx指定でOKです。
その他の指定方法（相対値の指定）
先に挙げた%、em、rem、vw/vhが文字の相対指定の単位になります。
「相対」とは日本語の言葉通り「何かに対して何かが計られる」ことで、font-sizeに相対単位を指定すると対象のサイズによって文字の大きさを可変します。
ではそれぞれ何が対象になるか見てみます。
相対値の単位
- %・・・標準の文字サイズが対象
- em･･･親要素の文字サイズが対象
- rem･･･html(ルート)の文字サイズが対象
- vw/vh･･･ビューポート（ブラウザサイズ）の幅（vw）か高さ（vh）が対象
･･･覚え始めの人にはなかなかややこしい指定ですよね。
どこで相対値の指定を使うのか
一番の使いどころはスマートフォン・タブレット用サイトの作成です。
もちろんpx指定でもスマートフォンで文字は表示されるのですが、大きすぎたり小さすぎたりで可読性に影響が出る場合があります。
そのため、主にレスポンシブ（PC・スマホ両対応）サイトに相対値の指定を採用する機会が増えています。
%の指定方法
%は標準の文字サイズが対象になります。
現在のブラウザでは標準のフォントサイズは16pxに統一されています。
ただ古いブラウザですと14pxのものがあったりします。
%指定では標準文字サイズを100%として、その何%で表示したいかを指定します。
指定方法
- font-size:100%（文字サイズを16pxにする）
- font-size:62.5%（文字サイズを10pxにする）
全ての指定に%を使う場合それぞれ何pxが何%に相当するか計算しなければならないので、デザインが上がっているものを指定するのには不向きですね。
emの指定方法
emは親要素の文字サイズが対象になります。
「親要素」というのは、指定する要素を包み込んでいる要素（以下「包含要素」）を指します。何も挟まずHTMLに直接記述した場合は<html>が親要素になるので、htmlに記述がなければ基準が16pxになります。
emでは基準文字サイズを１として、その何倍で表示したいかを指定します。
指定方法
- font-size:1em（基準が16pxならば16pxで表示）
- font-size:1.5em（基準が16pxならば24pxで表示）
ただ包含要素がある場合そのサイズが基準になるので、同じpタグに1emと指定してもそれぞれ包含要素の指定によってサイズは変わります。
特性を理解して使用するには有用な場合もありますが、汎用性はやや欠ける感じです。
remの指定方法
remはhtml(ルート)の文字サイズが対象になります。
ざっくり言えば%とemを合わせた感じ。
htmlに指定した文字サイズを基準にその何倍で表示したいかを指定します。
指定方法
- font-size:1rem（基準が16pxならば16pxで表示）
- font-size:1.5rem（基準が16pxならば24pxで表示）
ただ基準が16pxだと、例えば「30pxは16の何倍？」と計算が面倒ですよね。
そこで基準をきりの良い10pxに設定します。
するとどうでしょう！とたんに利便性が向上します！
- font-size:1.6rem（基準が10pxならば16pxで表示）
- font-size:3rem（基準が10pxならば30pxで表示）
ちなみに記述はこんな感じです。
[html] html{ font-size: 10px;//基準を10pxにする } p{ font-size: 1.6rem;//基準の10pxの1.6倍になる16pxで表示 } [/html]
例えばスマートフォンでもう少し文字を小さくしたい場合は「Media Queries」という記述で、スマホ表示の時の基準サイズを小さくするだけで可変するようになります。
※この辺はやや横道にそれるので「こんなこともできるんだ～」程度に流しておいてください。
という事でレスポンシブ時の可変もでき、指定も煩雑にならないrem指定が現状自分的にはベストかな、と思います。
vw/whの指定方法
上で「ベストな記述」を出してしまったので蛇足的ですが、最後にvw/vhになりますがこれはやや特殊で、ビューポート（ブラウザ）のサイズが対象になります。
vwの「w」はwidthで幅に合わせて、vhの「h」はheightで高さに合わせてという意味で、それぞれブラウザサイズを100として何%で表示するかを指定します。
- font-size:10vw（ブラウザの幅が1000pxならば1/10の100px）
- font-size:5vh（ブラウザの高さが800pxならば1/20の40px）
レスポンシブのパーツなどでは使いどころがあるかも知れませんが、現状ちょっと難しい感じです。
文字サイズ指定方法のまとめ
たかだか文字サイズだけで随分話が長くなってしまいました･･･
ただホームページの大部分が文字情報であり、基本的にサイトは「読み物」だと考えていますのでキチンとおさえておきましょう。
- 基本はpx単位で覚えよう！スマホなどを気にしなければこれでＯＫ！
- 慣れてきたらremが便利！レスポンシブサイトも簡単に対応できる！
次回は、今回掲載できなかった文字関連の行間、行揃えについて解説します。
