第24回 各ブラウザーのフォントサイズを揃えるYahoo! UIを使うテーブルレイアウトを卒業しよう

各ブラウザーのフォントサイズを揃える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です。

CSSでフォントサイズを指定
指定したいサイズ(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のコードをコピペして使うときは著作権の表示だけお忘れ無く!

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
各ブラウザーのデフォルトスタイルを揃える
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読