- 2008-02-22 (金) 19:02
- CSS
デザイナーは絶対指定で（つまりｐｘ指定）自分が作ったラフ通りガッチガチに固定しろと主張する人がまだ多いと思うが、巷の流れに乗るなら相対指定にして然るべきという感じ。
しかし、いざ相対指定しようとしたら単位とか数値とかに迷ったりする。
emすら絶対指定だと切り捨てる厳しい人もいるらしいし、相対は継承されるから指定が難しい…
思ったサイズにならないこともしばしばある。
フォントサイズ固定してなきゃデザインが崩れる、なんてのもありがちで。
そこでこのブログのテーマVicunaでも使われてるYUI Fonts CSSの出番です。
YUI Fonts Example: Setting Font Size
Note: To set the font size, always use percentages (%) from the conversion chart for maximum consistency and accessibility.
YUI Library - Fonts - Example: Setting the font size with YUI Fonts (2008-02-22)
解説はこっち。→Yahoo! UI Library: Fonts CSS
YUIのFonts CSSは、以下のfonts.cssを読み込むかコピペしてからFont-size Adjustmentのパーセント値で指定すると
絶対指定した時と同じサイズになる。というものです。
スタイルシートのフレームワークといったところでしょうか。
-
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css">
全てのフォントをガチガチに固定するわけじゃないため非常に柔軟で
javascriptなんかでフォントサイズ変更を行う場合、基礎となるbodyのフォントサイズを変更すれば
相対指定している全てのフォントサイズが同じ比率で変更できて非常に便利です。
The Cascade
相対指定をすると子要素にサイズが継承されるので、サイズ指定が重なって継承された場合は
想定したサイズよりも小さくなったり大きくなったりすることがあります。
たとえば、このようにpとaのフォントサイズ指定が重なった場合
ブラウザに表示されるaのテキストはfont-size:85%で指定したものと同じになります。
これを本来の93%のサイズで表示するには a{font-size:100%;} にします。
フォントサイズを相対指定にした場合は、line-heightも相対指定（単位無しなど）にした方が良いです。
IEがFirefox等よりも一回り大きなサイズになってるときは、
font-familyに日本語フォントを指定すると治ることがある。
以下が参考になると思います▼
CSS all tags style setting (1776)
自分用に作ったコピペテキスト▼
-
/*-----------------------------------------------------
-
Yahoo UI Library Font-size Adjustment
-
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
-
http://developer.yahoo.com/yui/license.txt
-
http://developer.yahoo.com/yui/fonts/
-
10px = 77% 11px = 85% 12px = 93% 13px = 100%
-
14px = 108% 15px = 116% 16px = 123.1% 17px = 131%
-
18px = 138.5% 19px = 146.5% 20px = 153.9% 21px = 161.6%
-
22px = 167% 23px = 174% 24px = 182% 25px = 189%
-
26px = 197%
-
------------------------------------------------------*/
