文字の大きさと単位の関係
文字の大きさを指定する単位はポイント、ピクセル、パーセント、およびemなどがあります。それぞれの違いについて説明します。
はじめに
どのブラウザでも同じように文字の大きさを指定したいと思ったことはありませんか？ 異なるブラウザ、違うバージョンのブラウザで見てみると文字がかなり大きくなってしまった…という経験はありませんか？
そこで、Webページの文字の大きさの単位、および仕様について確認していきましょう。
後方互換表示に注意
Web標準に準拠したページを作るには、XML宣言をつけることを推奨とされています。このサイトはつけてませんが（逃
XML宣言をつけると文字の大きさがでかくなるといえば、Internet Explorer 6 あたりではないでしょうか。
長年運営してきている www.wanichan.com には、今のところ3割近くの閲覧者がInternet Explorer 6でコンテンツをご覧になっています。もうIE6はない、という方、IE6の環境を持ってないという人は、Expression Web 3 から付属された、Expression Web Super Preview を利用するとよいでしょう。一度、あなたのサイトを Expression Web SuperPreviewで確認してみてください。びっくりするかもしれません。
それぞれの単位の比較
Webサイトでの表示解像度は、72・75dpiとなるはずですが、Windowsの場合は96dpiになります。
72dpiの場合は、1pt＝1pxになるみたいですが。。。
下のサンプルはWindowsでの環境をもとに作成しています。Macでは文字の大きさが異なると思います。ご了承ください。
smallやmediumなどのフォントの名前は使わないほうがいい
Internet Explorer 6
において、XML宣言が入っているために後方互換とされた場合、および IE5.5以前では、
font-size: small; と font-size: 100%;
が同じサイズとして扱われる仕様により、文字の大きさのレベルが1つ上がってしまいます。Expression
Webの［フォントサイズ］ボックスにおいても、small は 12pt として定義されています。
通常、font-size: medium は、<font site="3"> と同様になるはずですが、なぜか <font size="4">と同じ扱いをされてしまいます。すなわち、実際より120％文字が大きくなってしまうわけです。
Expression Web & FrontPage
blog を IE6 でみると、でーんと文字が1.2倍の大きさになってるはずです。
# ちゃんと直せ、って言われるかもしれませんが、わざとです（ウソです、ただ面倒なだけです・・・逃）。
IE6を考慮するなら％を使おう
私個人的に、もう Internet Explorer 6 は考慮しない方向にいきたいところです。でもやはりまだ根強く利用しているユーザーが存在するのも事実です。Internet Explorer 6 に考慮して、どのブラウザでも同じ大きさのフォントで表示させるには、％表示が無難という結論に達しています。別にポイントやピクセルでもいいのですが、Internet Explorer 6 では文字の大きさを変えることができません。ユーザビリティに問題があるとかいわれそうなので、できるだけ避けたほうがいいでしょう。
コメント
このサイト内の関連記事
