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

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

トモ・リーン
基本の文字サイズは前のエントリーで設定したけど、他にも一段小さい文字サイズ、大きい文字サイズの部分があるわよね。
ケンジ
ここの事だね!!
トモ・リーン
じゃあ、まずは小さい文字の部分をするわね。
ここのデザインの文字サイズは10pxね。
ケンジ
そうだぜ!
これはどのタグに文字サイズの指定をしたらいいのかな・・・?
トモ・リーン
ソースを見ると、ddタグで囲んでいるからここでいいわよ。
file11までに作ったHTMLファイルより一部抜粋
----省略-----
<dl>
<dt>みったん・略歴</dt>
<dd>産まれながらの王子。<br />
甘い外見とは裏腹にイライラするとすぐにかみつく。<br />
趣味的にキレる。恐怖の支配者。また、どうしようもないビビリなのは有名。</dd>
</dl> ----省略-----
実際のファイルを見てみる
ケンジ
おう!
トモ・リーン
実はここも考え方は同じなの。
前のエントリーでは100%未満のfont-sizeの指定の要素の入れ子で、文字サイズが小さくなっていく事を注意点としていたけど、今度はその事を利用して文字サイズを制御するのよ。
ケンジ
ほほ〜。
じゃあ、今度は何%に指定したらいいのか、俺が計算してみるよ。
トモ・リーン
チャレンジャーね!
ケンジ
俺だってやってYARUZEEEーーー☆
まず、bodyに設定している基本の文字サイズは12px。希望する文字サイズは10px。
10pxは12pxの何%の文字サイズか。
10÷12=0.83(小数点3位以下省略)→%に直すと83%
dd { font-size:83%; } だーーーー!
トモ・リーン
お〜! そうよ。
でも、12pxから10pxの間って2pxしかないわよね。
そんなわけで、あんまり細かい%設定をしなくても大丈夫よ。
ここだったら80%でもちゃんと10pxで表示されるわ。
計算が面倒な人は、ブラウザでプレビューをしながら5%単位で数値を下げながら調整するといいわよ。
ケンジ
んーーーーーだとぉお!
俺の計算タイムをかえせぇええ!
アンタ細いのか、いーかげんなのか、分かんねぇえよ!!
トモ・リーン
ブハーーーーーっ!!!
ケンジ
・・・・・・。
トモ・リーン
はい、今度は大きめサイズの見出しの方ね。
ケンジ
(とうとう、この時が来たか・・・。)
なんかさぁ・・・。
あんまり言いたくないんだけど、ここって元々字が大きくね?
ちょっと、どうしたらいいのか分からないんだけど。
トモ・リーン
ここは元々のh3のスタイルが効いてるわね。
ケンジ
「元々のスタイル」って。
そんなの俺は付けてないけど?
トモ・リーン
ブラウザの設定よ。大体h3のスタイルはどのブラウザも太字で微妙に大きめの文字ね。
ケンジ
そっかぁ。
トモ・リーン
太字の設定は、もう太字なのでほっといていいわよ。
問題の大きさなんだけど・・・。
ケンジ
ごくり。
トモ・リーン
とりあえず、h3に100%といれてみると!
なんと12pxの大きさになります!!
ケンジ
ほんとだーー!
ってことはデフォルトのh3の大きさは無かった事にして、12px→14pxの計算をしたらいいんだな!
トモ・リーン
おほほほほ。
そーーーゆーーーことよ!
文字サイズの調整が終わったネコデザインのファイル【html】 文字サイズの調整が終わったネコデザインのファイル【css】
トモ・リーン
次回は文字の形の設定をします。
おたのしみに~~~!
今回のポイント!
基本の文字サイズと違うところは「bodyで指定したサイズの何%になるか」で指定しよう!