はじめてのCSS:やさしさいっぱいのCSSが肌にしみこむ!カモ。

デザイン通りに組む! ~文字サイズ~

トモ・リーン
まずは、file8~10を合体させます。
file8~10で意味のあるコーディングレイアウトをバラバラにしていますが、実際に組む場合はfile8で組んだ意味のあるコーディング状態のものをじっと眺めて、レイアウト上、どうしても必要な箇所にdivタグを追加して行ってください。
ケンジ
オケー!合体させたぜ!!
トモ・リーン
じゃあ、大まかなレイアウトは終わってるから細かいところ行くわよ~!
まずは基本の文字設定ね。
ケンジ
このデザインだぜ!(下の画像をクリックすると大きくなるよ)
トモ・リーン
このデザインの基本の文字サイズ(通常の読ませる部分)は12pxぐらいかしらね・・・。
ケンジ
おう!
トモ・リーン
文字の設定で大事なのは、サイズ単位フォント(文字の形)そしてそれらのスタイル設定をするタグに注意ね!
ケンジ
この辺はサクッとやってるけど、注意点とかあるの?
トモ・リーン
実は、IE6での操作性を考えると、ちょっとややこしいわね。
ケンジ
IE6きたーーー!
トモ・リーン
説明の前置きとして、設定出来る文字サイズの単位を見てみて。
設定出来る文字サイズの単位
px
モニター上のドットに対応する単位。どの環境で見ても同じ比率になる。
pt
もともと印刷用の単位。
解像度が違う場合、同じ数値だと解像度が高い方が大きく見える。Mac(72dpi)とWindows(92dpi)は解像度が違うので注意。
em
文字サイズに対する指定単位。
0.5emだと基本となる文字サイズの半分の大きさになる。
%
文字サイズに対して50%とすると基本文字サイズの半分の大きさになる。
ケンジ
う~ん。
俺は「px」を使ってるな~。
トモ・リーン
ふ、ふ、ふっ!
引っかかったわね☆
ケンジ
えぇええええ!!!
な、なんだよ上の表でもどの環境で見ても同じ比率になるって書いてるじゃねぇかよ!!!
トモ・リーン
pxで文字サイズを指定するとIE6で文字サイズの変更が出来なくなるのよ。
(下の図参照)
pxで文字サイズを指定するとIE6で文字の可変が出来なくなる
ケンジ
う~~~ん。
まぁ、そうだけどいいんじゃない?
気にしすぎだぜ。
トモ・リーン
世の中はユーザビリティ重視・高齢者社会へ移行してるんだから、そんなこと言っちゃダメ!
「漢ならやってやれ!めざすは世界征服」よ。
ケンジ
・・・・・・。
ケンジ
そ、そうだな!漢ならやってやれだ!!
で、具体的にはどうしたらいいの?
トモ・リーン
うふうふ・・・。
トモ・リーン
まずは単位ね!%を使います。
で、値だけどIE6のデフォルトの文字サイズは16pxだから
12÷16=0.75 → %に直すと・・・
ケンジ
75%だね!
トモ・リーン
いえ~っす!
そのスタイルを書く場所ですが、オススメはbodyタグにです。
ケンジ
なんで??
pでもいいんじゃないの?
トモ・リーン
一番入れ子になる心配の無いところがいいのよ。
bodyの中にbodyとか有りえないわよね?
ケンジ
うん、まあそうだけど・・・。
そんなに入れ子が問題なの?
トモ・リーン
一番危ないパターンがテーブルレイアウトのコードでtdに文字サイズの設定を入れてしまう方法なんだけど、こうなると何重にもtdの入れ子が出来るわ。
良くあるテーブルレイアウトの構造
トモ・リーン
td { font-size:75%; } とした場合、上の図のように組まれていると、最終的にテキストが入っているメニューの部分は7px。
コンテンツの部分は5pxになるわ。
フッター部分は12pxね。
ケンジ
???なんで。
トモ・リーン
メニュー部分はtdが3重になっているので
0.75×0.75×0.75=0.42(小数点2位以下四捨五入)
16(ブラウザのデフォルト文字サイズ)×0.42=6.722
6.722(小数点以下四捨五入) →7px
コンテンツ部分はtdが4重になっているので
0.75×0.75×0.75×0.75=0.31(小数点2位以下四捨五入)
16(ブラウザのデフォルト文字サイズ)×0.31=4.96
4.96(小数点以下四捨五入) →5px
フッター部分はtdが1重なのでtdに設定したままの値になるのよ。
実際のファイルを見る
ケンジ
うわ~~~~。
ケンジ
あ!
でも個別メニューのところ、コンテンツのところにclassとか付ければ解決だよね?
各tdにclassを付けた状態
トモ・リーン
そうね。
テーブルレイアウトで、どうしてもtdにフォントのサイズ指定をしなければならない場合はそうなるわ。
でもbodyに文字サイズを書いておけば、各tdに文字サイズの指定が設定されたclassを付けなくてもいいから楽チンよ!
classの付け忘れによるミスも防げるしね。
bodyにfont-size:75%を付けたファイル
ケンジ
なるほど~~。
トモ・リーン
例ではtdのことを主に話したけど、pでもdivでも同じなのよ。
まあ、pの入れ子はあまり無いと思うけどdivの入れ子は良くあるわよね。
そんなわけで一番入れ子になる可能性の無いbodyに基本の文字サイズの指定をするのがいいわよ。
ケンジ
じゃあ、file8~9を合体させたファイルにbodyに文字サイズのスタイルを書くぜ!
bodyにfont-size:75%を付けたネコデザインのファイル【html】 bodyにfont-size:75%を付けたネコデザインのファイル【css】
トモ・リーン
いいわね!
ちゃんと、IE6の機能で文字の拡大&縮小が出来るわ!
ケンジ
ふふ~~ん♪
トモ・リーン
上機嫌なところ非常に申し訳ないのですが、話しが長くなってしまいましたので文字について、続きは次回にまわします。
ケンジ
ええ~~~~!
トモ・リーン
次回はさらに文字サイズの応用をします。
おたのしみに~~~!
今回のポイント!
長々と書きましたがとりあえず
body { font-size:75%; }
と書いておけばいいですよ。