文字サイズの変更【font-size】（2）：CSS入門
CSS入門（16）
前回の記事「文字サイズの変更【font-size】（1）：CSS入門」の続きです。
今回は、文字サイズを細かに設定する方法をご紹介します。お話は、次の順番で進みます。
文字サイズを細かに設定する方法
1：文字サイズを細かに設定するときの単位
font-sizeで文字サイズを細かに設定するときは、次のような単位で指定できます。この中で、より利用されているのは、「%」、「px」、「em」の3つです。
おそらく、「%」、「px」、「em」の3つ以外は、まずお目にかかることもないでしょうから、覚える必要はありません。
% | 割合（%）で指定する。 |
|---|---|
px | 1ピクセルを1として指定する。 |
em | フォントの高さを1として指定する。 |
ex | 小文字の｢x｣の高さを1として指定する。 |
pt | ポイント単位で指定する。 |
pc | パイカ単位で指定する。 |
cm | センチメートル単位で指定する。 |
mm | ミリメートル単位で指定する。 |
in | インチ単位で指定する。 |
2：おすすめなのは？
（1）おすすめなのは「%」です
おすすめなのは、消去法になりますけれど、「%」です。
（2）「px」はどうして駄目なの？
「px（ピクセル）」は、Windows IEにて、文字サイズが固定表示されてしまうので、好ましくありません。
よく「デザイン的に、文字サイズを固定表示したい」という人がいらっしゃいますが、これは一般的に好まれない行為と言われています。
なぜなら、作り手の丁度良いと思う文字サイズが、すべての人にとっても丁度良いとは限らないためです。
特に、小さい文字で固定してしまうと、年配の人や視力の弱い人の閲覧に支障をきたす場合があります。
（3）「em」はどうして駄目なの？
「em」は、Windows IEでのバグが多いようです。
割合で設定する方法（%）
1：前回までのお話
（01）
前回は、largeなどのキーワードによる指定で、フォントの大きさ（font-size）を変更しました。
今回は、キーワードによる指定を廃し、%を使って、決め細やかにフォントの大きさを調整する方法を用います。
以下、前回までのCSSコードです。
2：<body>タグに、「font-size（%）」を指定する
（02）
前回は、継承がややこしくなりそうだったので、bodyには、font-sizeを指定しませんでしたが、今回は指定しておくことにします。
とりあえず、標準値に対して、100%を指定してみましょう。書き方は、数値に「%」をつけて書くだけです。
body { font-size: 100%; }
ただ、bodyへfont-size 100%を指定すると、古いOperaでバグが発生する（文字が極端に小さくなる）らしいので、100.01%を指定します。
（03）
ブラウザで表示してみましょう。おそらく見た感じ、何も変わらないはずです。
3：各タグに、「%」を指定する
（04）
前回同様、h1、h2、p、liにも、「%」で指定しようと思います。次のような数値にしてみます。
好きな大きさを入力し、試してみてください。
body | 100.01% |
|---|---|
h1 | 120% |
h2 | 100% |
p | 90% |
li | 90% |
（05）
ブラウザで表示してみましょう。
私は、前回のキーワード指定のlargeやmidiumに近い数値にしたので、あまり違いが分からないかもしれません。
前回、smallにして小さい感じがした<p>タグ、<li>タグは、少し大きめにしてみました。%を使うと、このような微妙な調整が出来るようになります。
4：継承
（06）
今回、bodyに指定したfont-sizeの数値（%）を変更すれば、全体的に文字サイズの増減をコントロールできます。
キーワード指定の場合は、1段階違うと大きく変動してしまいますが、「%」であれば、きめ細かに変更できます。一元管理もしやすくなります。
例えば、bodyを110%にすると、継承がうまいことはたらいて、すべてのfont-size値へ波及します。よかったら、試してみてください。
5：他のブラウザで表示する
（07）
他のブラウザで表示しても、キーワード指定のときと違って、文字サイズの差が大きくは出ないはずです。
参考
割合（%）で言われても、どのくらいの大きさなのかよく分からないので、16pxを基準として、おおよその値を書いてみました。
h要素 | css2.1 | おおよそ | |
|---|---|---|---|
xx-large | h1 | 200% | 32.00px |
x-large | h2 | 150% | 24.00px |
large | h3 | 120% | 19.20px |
medium | h4 | 100% | 16.00px |
small | h5 | 88.8% | 14.21px |
x-small |
| 75% | 12.00px |
xx-small | h6 | 60% | 9.60px |
割合（%）の数値や対応状況などは、w3gさんの「font-size」を参考にさせていただきました。ありがとうございました。
次回予告
次回は、idセレクタ、classセレクタについて書きます。
その間に、ブラウザの文字サイズを変更する方法と、ブラウザでHTMLソースを表示する方法を書いています。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/25 更新日：2008/04/25
« 「文字サイズの変更【font-size】（1）」｜「idセレクタ、classセレクタとは？」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/280-b8dc196a
