はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
デザイン通りに組む！　～文字サイズ　応用～
2008/07/28
トモ・リーン
基本の文字サイズは前のエントリーで設定したけど、他にも一段小さい文字サイズ、大きい文字サイズの部分があるわよね。
ケンジ
ここの事だね！！
トモ・リーン
じゃあ、まずは小さい文字の部分をするわね。
ここのデザインの文字サイズは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で指定したサイズの何%になるか」で指定しよう！
トラックバック(0)
このブログ記事を参照しているブログ一覧：デザイン通りに組む！　～文字サイズ　応用～
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/90
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4