第24回 各ブラウザーのフォントサイズを揃えるYahoo! UIを使うテーブルレイアウトを卒業しよう
このページに掲載されている内容は、2010年に作成されたものです。
各ブラウザーのフォントサイズを揃えるYahoo! UIを使う
いろいろなブラウザーでの見え方を調整する、というのはページを作っていて苦労する点ベスト5には入るぐらいメンドクサイことです。
なかでもフォントサイズというのは、各ブラウザーが持っているデフォルトスタイルによって「微妙な」違いがあるため、なかなかやっかいです。
それをがつんと一発で解決してくれるのが、今回ご紹介するYahoo! UI LibraryのFont CSSです。
まず、フォントサイズの指定方法についてですが、単位をpx（ピクセル）としてサイズを固定してしまう方法と、emや%をつかった相対的なサイズにする方法が考えられます。
pxで固定してしまうと、ユーザーがブラウザーの設定で文字サイズを標準以外の設定にしても見た目が固定になってしまうため、アクセシビリティ的にあまりよくありません。
そこで、%でのサイズ指定かつ、どのブラウザーでも同じように見せるためにFont CSSを使用します。
※以下余談
最近のブラウザーは「文字サイズの拡大縮小」ではなく「ページの拡大縮小」に移行しつつあります。この場合、ページ全体が拡大縮小されるため、pxで指定されていても文字も大きさが変更されます。これがスタンダードとして確立されればフォントサイズに関する悩みは消えるかも。
Font CSSの使い方
まず、link要素で以下のCSSファイルへリンクする、またはCSSファイルをダウンロードして使用（linkやコピペで）します。
<!--XHTMLならこっち-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<!--HTMLならこっち-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css">
これで完了です。
これができたら、あとは下記の対応表にしたがってCSSでフォントサイズを指定すればOKです。
| 指定したいサイズ(px) | 実際に指定するサイズ(%) |
|---|---|
| 10 | 77 |
| 11 | 85 |
| 12 | 93 |
| 13 | 100 |
| 14 | 108 |
| 15 | 116 |
| 16 | 123.1 |
| 17 | 131 |
| 18 | 138.5 |
| 19 | 146.5 |
| 20 | 153.9 |
| 21 | 161.6 |
| 22 | 167 |
| 23 | 174 |
| 24 | 182 |
| 25 | 189 |
| 26 | 197 |
たとえばこんな感じ。
p {
/* 12pxと同等になる */
font-size: 93%;
}
このFont CSSはBSDライセンスで配布されていますので一応ご注意ください。
BSDライセンスとは
BSDライセンスとは、オープンソースのライセンスの1つで、使用にあたっては配布元は「無保証」ですが、再配布する際は著作権だけ表示しておけばよいというものです。なので、このFont CSSのコードをコピペして使うときは著作権の表示だけお忘れ無く！
では次回もお楽しみに。（こう
）
お問い合わせ