訪問者に優しいWebサイト作り

サイト内検索  

HOMEコンテンツページ編→文字サイズの固定はしない

文字サイズの固定はしない

スタイルシートの弊害

スタイルシートが普及してきたことは、表現方法と文章構造を別々にしようというHTML4.0の在り方から言えば、よいことなのでしょう。しかし、困ったことに、スタイルシートを使っているが故に、読みにくくなってしまっているサイトも出てくるようになりました。具体的に言うと、文字が小さすぎて読みづらいのに、ブラウザ側で文字サイズを変更しようと思っても、その変更ができないという状況なのです。(注1参照

この原因といえば、
  「スタイルシートで文字サイズを絶対値で固定してしまっている」
ことです。
スタイルシートが普及する以前は、<FONT SIZE=  >で、文字のサイズを7段階に調整することしかできませんでした。デザインを重視しようと思えば、これではあまりにも不十分です。ですから、スタイルシートの登場は、デザイン重視のWebサイト制作者にとっては、朗報でした。スタイルシートの登場により、自由なデザインが可能となったからです。デザイン重視の世界では、相対的な大きさより絶対的な大きさの方がデザインがしやすいし、見栄えも良いと言うことで、絶対的な値を使ったスタイルシートを用いたページが普及しました。また、それをcoolだととらえ、ブラウザ側で変更しても文字サイズが変わらないというのをウリにしているサイトまであります。

しかし、ここに大きな落とし穴があったのです・・・絶対的な大きさでデザインをしたが故に、アクセシビリティの悪化を招く結果を生み、推奨環境の記述をしてしまうサイトが増えてしまったのです。

HTMLでのサイズ指定は、デザインという観点で見れば、お世辞にも良くないでしょう。しかし、相対値での指定しかできなかったが故に、訪問者がサイトを訪れたときに文字が小さいと感じたら、ブラウザの設定で、文字を大きくするということが自由にできました。

ブラウザで、文字の大きさを訪問者側がある程度調整できる機能というのは、決して視覚障害者のためにだけあるものではありません。健常者でも、使っているディスプレイの解像度が大きくてブラウザ標準の文字サイズでは小さすぎるとか、近視なので小さい文字を見るのがつらい場合にも使います。

どんなにcoolなデザインであろうとも、その中身が読めないのなら、coolなんかじゃないです。Webページは見てもらってなんぼのもの。見栄えの良さも大切ですが、その中身が一番大切なのですから。coolかそうでないかは最終的には中身を見て、訪問者が判断を下すのです。決して、作成者の自己満足でcoolだと思いこんでしまってはいけません。

注1:Internet Explorerの場合、文字サイズがpx,pt指定だと、ブラウザ側での文字サイズ変更が無効。Netscape(4.x、6.xとも)は、文字サイズがpx,pt指定でも、ブラウザ側で文字サイズの変更が有効。

相対的な大きさを使う

幸い、スタイルシートでの文字サイズの指定は、

mm cm in(インチ) pt(ポイント) pc(12pt=1pc) px(ピクセル:注2)という絶対値による指定以外にも、

em(大文字の「M」の高さを基準)、ex(小文字の「x」の高さを基準)、%という相対単位での指定やlargerとsmallerによる相対サイズ指定、xx-smallからxx-largeまでの7段階によるキーワード指定といった、相対値による指定ができるようになっています。

相対サイズでの指定にしておけば、ブラウザで文字サイズを変更することができます。

スタイルシートは正しく使うことができれば、Web制作者にとっても便利なモノですし、訪問者側にとっても見栄えがよいサイトを見ることができるということです。
これから、スタイルシートを導入しようと思うのでしたら、文字サイズは相対的な大きさで指定するほうがよいと思いますよ。

例外として、絶対的な大きさが使えるのは、画像の代用として、スタイルシートで文字の大きさや位置を固定するときですね。

注2:px(ピクセル)は、コンピュータのディスプレイ上の1点で、その大きさは解像度によって異なることから相対単位扱いになる。
しかし、実際にブラウザで表示すると、ピクセルで位置指定している部分は、ブラウザの大きさを変更しても、その位置は変更されないし、文字サイズで指定している場合は、ブラウザ側でのサイズ変更を受け付けない場合もあります。
これらの理由により、このサイトでは、ピクセルは絶対値扱いとしています。

H1等の要素、ちゃんと使えてます?

たま〜に、H1などの見出し要素で、文字サイズを変更しているサイトがあるようですが、、、本来H1などの要素は見出しを付けるためにあるモノですので、この方法で文字サイズの変更をするのはやめましょう。ブラウザによっては、H1などの要素に意味づけをしているモノもあります(例:Lynxでは、H1要素はセンタリング)。
それだったら、まだ<FONT SIZE= >で文字サイズを指定する方が余程ましです。

スタイルシートでは、H1などの要素に文字サイズを指定することができますから、見出しを付けることで極端に文字サイズが大きくなってしまって、思うようなデザインができなかったと嘆いていたWebサイト制作者にとっては、見栄えを良くしつつ、論理的にもわかりやすい構造を持ったサイト作りができるというメリットがありますね。

©Copyright 2001-2006 FUMING fuming@neko.chan.ne.jp

リンクに関してはご自由にどうぞ。