まだフォントサイズ固定ですか?

  1. ふとした疑問
  2. スタイルシートでのサイズ単位
  3. 絶対指定の功罪
  4. なぜこれがいけないか
  5. じゃあどうすればいいの?
  6. まとめ

1.ふとした疑問

 私がいつも読んでいる雑誌、DOS/V Magazine、これの2001/3/15号の/Vmag.CLINIC(P190〜191)というコーナーに、このような読者の質問がありました。

「Internet Explorer5を使っていて、解像度は1280*1024ドットなのですが、文字の小さなWebサイトが見づらいので、ブラウザの文字を最大にしていますが、それでも変わりません。ディスプレイの解像度を下げる以外に文字を大きくする方法はないのでしょうか?」

 …なるほど。これは私と同じような環境です。確かに私も悩まされています。この質問に対する回答に、次のような一文がありました。

「現在、主流のWebサイトではスタイルシートを使用しているため、Internet Explorerの[表示]→[文字のサイズ]では、殆ど文字の大きさの変わらないサイトが増えています」

 …ちょっと待ってください。これは違います。確かに文字の大きさが変わらないのはスタイルシートによる効果ですが、これは誤ったスタイルシートの使い方をしてるからです。この書き方だと、まるでスタイルシートが悪い様な意味になってしまいます。

2.スタイルシートでのサイズ単位

 使い方の説明の前に、原因となっているサイズ単位について説明します。

 スタイルシートでは、いくつかのプロパティに対して、サイズを指定する場合、何種類かの単位によって表します。mm(ミリメートル)、in(インチ)、pt(ポイント)、px(ピクセル)、em(エム)、%(パーセント)などが代表的です。

 これらは大きく分けて、2種類に分ける事が出来ます。それは絶対単位と、相対単位です。絶対単位というのは、表示環境でサイズが変動しない単位と言う事です。mm(ミリメートル)、in(インチ)、pt(ポイント)などは、あらかじめ単位が決められていて、どの環境でも等しく表示される…はずですが、ディスプレイの解像度がWindowsは96dpi、MacOSは72dpiなどとOSによって異なるため、厳密には異なってきます。

 一方、相対単位というのは、状況によって変動する単位の事です。画面の解像度に依存するpx(ピクセル)、現在の文字サイズを表しているem(エム)、%(パーセント)などは、環境によって大きさが変動します。

 さて、この2種類、実際に使ってみるとどうなるか調べてみましょう。私の使っているWindows版InternetExplorer5.5SP1、解像度1280*1024、文字サイズ中で、全く同じ大きさになるようにしてみます。

単位別の表示
絶対単位 指定無し
あいうえお
相対単位
mm(ミリメートル) あいうえおあいうえお
あいうえおあいうえお
あいうえおあいうえお
px(ピクセル)
in(インチ) em(エム)
pt(ポイント) %(パーセント)

 さて、どうでしょう。あなたが今見ている画面でも、すべて同じ大きさになっているのでしょうか?恐らく、絶対単位の3つは同じ大きさになると思いますが、相対単位の3つは微妙に違う大きさになっていると思います。これはブラウザの違い(NetscapeかInternet Explorerか)や、OSの違い(MacOSかWindowsか)によりますし、px(ピクセル)は画面の解像度に依存しますから。

 このように、文字の大きさというのは環境によって異なります。そのため、文字のサイズを含めてデザインを考えていた一部のサイトは、環境によるデザインの変化を嫌い、文字のサイズを絶対単位で指定、つまり絶対指定するようになりました。すると、文字のサイズはどの環境でも同じですから、自分の望んだ状態に出来ます。

3.絶対指定の功罪

 このように、ページ制作者にとっては、環境の違いによって文字サイズが変化し、デザインが崩れる事を考える必要がなくなるため、安易にこれを使いたがる傾向があります。また、「文字の大きさを固定する方法」として、安易にページ作成のテクニックとして紹介されているため、意味も分からず使っている人も多くなっています。

 ところがこの絶対指定、見る人によっては非常に困る事になります。では上の表の部分に戻って、[表示]→[文字のサイズ]を最小〜最大に変更してみてください。InternetExplorerを使っているなら、[Ctrl]キーを押しながらホイールを上下すると、それぞれ変わります。

 …どうでしょう。普通ならこれで文字の大きさが変わるはずなのに、変わるのはemと%でサイズを指定しているものだけ。他は全く変わりません。これは、emと%が、文字サイズに対する相対値だからです。そのため、基本となるサイズが変われば、それぞれ大きさが変わるというわけです。

 ところが、他の単位で指定したものは、文字サイズに関係なく決められています。そのため、文字の大きさは変わりません…と言うか、変更が出来ないんです。

設定で変更可能に これを回避する方法は、InternetExplorerの場合、[ツール]の[インターネットオプション]から[全般]→[ユーザー補助]を選び、その中の[Webページで指定されたフォントサイズを使用しない]を選ぶ事で、サイズ指定が解除され、ブラウザの文字サイズが適用されるようになります。

 ただ、これをやると文字サイズの指定が外れるので、スタイルシートのみで文字サイズを指定しているページだと、デザインが変になる傾向がありますが。

4.なぜこれがいけないか

 「文字サイズが変えられないって、変える必要ないじゃん」って思うかも知れません。確かに作っている本人は、自分の見やすい文字サイズにしているから、それでいいでしょう。しかしあなたと同じOS&ブラウザ&解像度で見ている人、そんな人はごくわずかです。つまり、その指定は、少数の人(制作者含む)にとって一番いい文字サイズで、大多数の人にとっては見づらいサイズになっているかもしれないんです…というか、なっています。

 それに、絶対指定を使う人は、総じて文字を小さくしたがる傾向があります。確かに字が小さいと格好良く見えたり、情報量が多くなるかもしれません。ただ、インターネットを使うのは目のいい人ばかりとは限りません。誰でも見られると言う事は、視力の弱い人も見る可能性があると言う事です。

 そういう人たちはブラウザの文字サイズを大きくして、何とかしてページを見ようとしています。ところが、こういった絶対指定をしているページでは、それをやっても文字のサイズは小さなまま。つまり、そういった人たちを排除しているも同じです。

5.じゃあどうすればいいの?

 それは簡単です。絶対指定ではなく、相対指定を使うと良いんです。もしくはスタイルシートでサイズ指定をしない。それだけです。

 「それじゃあ文字のサイズが違ってくる」っていう意見もありますが、それは違って当然です。ただ、違うという事を念頭に置いてデザインする事は決して難しくありません。相対指定を使えば、それぞれの文字サイズに置いても「バランス」は保たれます。バランスが保たれていれば、それはデザインと言えるのじゃないでしょうか?

 なお、私のお薦めは、%(パーセント)を使うと言うものです。emでも良いのですが、Netscape4.xやIE3で強烈なバグがあるので、とてもお勧めできません。

6.まとめ

 確かに、スタイルシートを取り入れると、デザインを強力に定義出来ます。しかし、使い方を誤ってはいけません。

 安易に絶対指定を取り入れると言う事は、自分の環境に依存したページ作りをしていると言う事。つまり、実際に見る人の事を考えない、自分勝手なページになっていると言う事です。インターネットに公開しているというのは、他者に見て貰う事を念頭にしている訳ですから、他者が見る事を十分に考えて、自分の見やすいサイズを押しつけたり、見やすい環境に出来なくするのは止めましょう。

 フォントサイズを固定にしているって事は、つまり「私は自分の事しか考えてませんよ〜」と全世界に向けて発信しているのと同じ事。あなたはそんな恥ずかしい事をいつまでしているつもりですか?

 …ふぅ、ちとテンションが高すぎるのを指摘されたので取り消し線を…なんてね。

該当コンテンツの削除にてこちらも削除。なので更新ではありませぬ。

(C) 1997-2003 by dieen, all rights reserved.
Text-search