2007年08月10日

フォントサイズの指定

今回はフォントサイズの指定についてお話します。

webページでフォントサイズを指定することは
カテゴリ分け、
ユーザビリティー(ページの見やすさ、使いやすさ)、
見せたい部分の強調など
さまざまな意味を持っていると思います。

フォントサイズの指定は、
特に難しいわけではありませんが、
知っていて損をしない情報を紹介します。
 

単位について

フォントサイズを指定する単位には
pt em px % など、さまざまなものがあります。

一番わかりやすく、使いやすいのが、px指定だと
思います。

しかし、pxで指定してしまうと、
IEの場合、ブラウザで文字サイズを変更しても、
表示されている文字の大きさは変更されません。

ユーザビリティーを考えると、
文字サイズを固定してレイアウト崩れを
回避する場合以外はpx指定より、
%指定するほうが、ベターであると言えます。
 

%指定のうまい使い方

%指定するほうがベターではありますが、
%だと、イマイチ文字の大きさが
イメージしにくいとは思いませんか?

そんなときは、簡単なルールを作って
しまえば、楽になります。


例えば、ページ全体のフォントを
75%に指定してしまいます。

75%に指定すると、12pxのフォントサイズに
なり、この大きさを基準にし、
さらに85%にすれば、約10px、
120%にすれば約14pxです。

よく使用するフォントサイズは
だいたい決まっていると思いますので
そのパターンだけ決めておけば
コーディングをよりスムーズに
行うことができるはずです。
(htmlコーディング)
あいうえお(サイズ指定なし)
<div class="percent75">
あいうえお(75%)
<div class="px12">
あいうえお(12px)
</div>
<div class="percent85">
あいうえお(75% × 85%)
</div>
<div class="px10">
あいうえお(10px)
</div>
<div class="percent120">
あいうえお(75% × 120%)
</div>
<div class="px14">
あいうえお(14px)
</div>
</div>
(cssサンプル)
.percent75 {
font-size:75%;
}
.percent85 {
font-size:85%;
}
.percent120 {
font-size:120%;
}
.px10 {
font-size:10px;
}
.px12 {
font-size:12px;
}
.px14 {
font-size:14px;
}
 

便利ツールについて

フォントサイズを%指定で決める場合、 「これは、いったい何pxなんだ?」
と思った際は、私は
Firefoxのアドオンである「Firebug」
を使い、フォントサイズを調べています。

便利なアドオンなので、
使用されていない方には
おすすめします。

Firebugの使い方については
またの機会にお話します。
(私が理解している範囲でですが。。。)

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 15:06 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。