文字サイズの変更【font-size】（1）：CSS入門
CSS入門（15）
文字の大きさを調整したいときは、CSSの「font-size」を使います。
<h1>タグ（大見出し）なんて、もう無駄に大きくて、デザイン的にありえないですから！・・・むきーっ・・・お話は、次の順番で進みます。
キーワード指定という方法
1：キーワード指定値
font-sizeの指定方法は、いろいろありますが、今回は、ブログのテンプレートでよく見かける「キーワード指定という方法」を、ご紹介したいと思います。
「キーワード指定法」などと言うと難しそうですが、次の一覧の中から、あなたが好きな文字の大きさを指定してあげれば良いだけです。
xx-large | 極々大 | サンプル |
|---|---|---|
x-large | 極大 | サンプル |
large | 大 | サンプル |
medium | 標準 | サンプル |
small | 小 | サンプル |
x-small | 極小 | サンプル |
xx-small | 極々小 | サンプル |
洋服のサイズも、こんな感じの表記の仕方ですよね。S、M、L、XLとか。覚えやすい指定の方法と言えます。
また、似たようなものに、smaller、largerがありますが、おそらく使わないので覚えなくて良いと思います。
2：おおよそピクセル単位で言うと？
ちなみに、どのくらいの大きさで増減するかと言うと、CSS1までしか対応していないブラウザは、倍率1.5で増減し、CSS2に対応しているブラウザでは、倍率1.2で増減します。
例えば、標準値が16px（ピクセル）と仮定して考えると、おおよそ次のようなサイズになるということかな。
css1 | css2 | |
|---|---|---|
xx-large | 54.00px | 27.65px |
x-large | 36.00px | 23.04px |
large | 24.00px | 19.20px |
medium | 16.00px | 16.00px |
small | 10.67px | 13.33px |
x-small | 7.11px | 11.11px |
xx-small | 4.74px | 9.26px |
文字の大きさを調整してみましょう
キーワードを指定する方法で、文字の大きさを調整してみましょう。
1：前回までのお話
（01）
前回は、どこまで行ったんだったかな・・・忘れちゃったのでブラウザで表示してみましょう。
あらまぁ、フォントを「cursive」のままにしていましたね。こりゃ失敬。
「ヒラギノ角ゴ Pro W3」、「ＭＳ Ｐゴシック」、「Osaka」あたりを設定しておいてください。さらに、「メイリオ」などを入れてもいいですよ。
CSSコードは、次のようになります。
2：font-sizeで文字の大きさを変更する
（02）
それでは、さっそく、無駄に大きい<h1>タグを変更してみましょう。「font-size」に、「large」を指定して、CSSファイルを保存してください。
（03）
ブラウザで表示してみましょう。いかがでしょうか、<h1>タグの文字が、適当な大きさになったと思います。
しかし、今度は、<h2>タグの文字が、<h1>タグの文字より大きいので、ちょっと違和感を感じます。
（04）
それでは、<h2>タグの文字も調整しましょう。ついでに、<p>タグ（段落）、<li>タグ（箇条書き）も変更します。
「font-size」は、次のようにしてみましょうか。
h1 | large |
|---|---|
h2 | medium |
p | small |
li | small |
（05）
変更して、ブラウザ表示してみてください。見出しは良いけれど、ちょっと、文章を読むには、文字が小さいかもしれませんね。
できたかしら？ちなみに、CSSコードは、次のようになります。
キーワードで指定するときのポイント
font-sizeを指定するときは、総じて「何を基準とする大きさなのか？」を、しっかり認識しておく必要があります。
1：何が基準となるのか？
（1）「midium」が基準（標準）
キーワードで指定する場合は、「midium」が基準（標準）になります。これは、よくCSSリファレンスなどでも書いてあるので、目にしたことがある人もいらっしゃるかもしれません。
さて、「それでは、midiumというのは、どのくらいの大きさでしょうか？何を基（もと）にして、midiumの大きさが決まっているのでしょうか？」
（2）ブラウザで設定される標準サイズ
どうやら、このmidiumというのは、ブラウザで設定されている「標準値」のことのようです。
Firefoxでは「標準サイズ」、IE6では「中」と表記されています。
それでは、そのブラウザの標準値は、どのくらいの大きさかと言えば、16pxと言われています。（Windowsの場合）
Firefoxは、標準値の変更が可能ですので、必ずしも16pxということではありません。（[ツール]-[オプション]-[コンテンツ]）
2：継承は使えるのか？
継承は、されます。
ただ、試してみると分かりますが、「キーワードによる指定法」での継承は、混乱してしまうかもしれません。
例えば、<body>タグに、「font-size: small;」を指定すると、内包しているすべてのタグが、「small」サイズに指定されるのかと思いきや、そうではありません。
どうやら、継承されるのは、「1段階サイズダウンした」ことが継承されるようです。
| 変更前のサイズ | 変更後のサイズ |
|---|---|---|
body | midium | small |
h1 | xx-large | x-large |
h2 | x-large | large |
p | midium | small |
li | midium | small |
しかし、結局それぞれのタグで、好きなサイズに変更するわけですから、やはり混乱するのではないでしょうか。
つまり、<body>タグに、「キーワードによる指定法」で「font-size」を付けることは、あまり意味がないような気がします。
IE6でも<body>タグに、「font-size: small;」を指定して試してみましたが、継承はされませんでした。
キーワード指定の弱点
弱点1：細かに設定できない
font-sizeをキーワードで指定する場合、簡便である利点はあるのですが、文字の大きさを、きめ細かに設定することができません。
例えば、「mediumは、もう少し小さくても良い」だとか、「smallが、もう少し大きければ」とか、細かな要求があると思います。
しかし、その「もう少し」のさじ加減ができません。
弱点2：IEのバグがある
IE（InternetExplorer）のバグの問題もあります。
例えば、次の画像を見ていただくと分かりますが、同じ「large」を指定しても、こんなに違います。CSSハックと言う特別な措置が必要になります。
次回予告
「キーワードによる指定法」は、理解しやすい反面、弱点もあります。ブログのテンプレートで見かけるのでご紹介しましたが、他の方法を検討する方が良いかもしれません。
次回は、他のfont-sizeの指定方法について書きます。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/23 更新日：2008/04/23
« 「日本人が好きなフォントは？」｜「文字サイズの変更【font-size】（2）」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/279-231d9015
