スタイルシートの活用 - だれもが読めるように

文字の大きさや色の違いを、上手に使い分ける魔法があります。それはスタイルシートです。

2001 年になって、ネットスケープやインターネットエクスプローラーという二大ブラウザでのスタイルシート対応が本格的になり、いよいよ利用環境が整いました。スタイルシートと言えば、斬新なデザインを追及するための先端技術という目で見られがちですが、もっと地味な使い方こそ、スタイルシートの本領を発揮するものです。

色がついてないと読まない人と白黒(あるいは特定の色)でないと読めない人。大きな字でないと読めない人と、小さな字で一気に読みたいと思う人。そのような相反する条件を一つのページで満たすにはどうすればいいでしょうか。鍵をにぎるのはスタイルシートです。

個々人が、「このように見たい」と思う形態に応じて、同一内容のページを複数用意するという方法は、確実ではありますが、実用上は困難な場合があります。どうしても、量的な制約があり、対応するものと対応しないもの、という区別ができてしまうからです。一枚のホームページに対して、字の大きさや色を変えて 10 枚の別ページを用意する、というのは、現実的ではなく、事実上、更新不可能なページになります。いくら工夫しても、更新が困難なために情報の伝達が遅れるのでは、本末転倒です。

アクセシビリティという意味での、スタイルシートの利点は、次の通りです。

  1. 一枚のページを、異なる文字サイズや色に、容易に切りかえられる。
  2. ページごとに対応するだけではなく、サイト全体を一括して変更できる。
  3. 見る側で、「自分専用のスタイルシート」を用意して、すべてのホームページを、自分に都合のよい表示に変更できる。

デザインに凝ったスタイルシートでは、文字の色や大きさを変更すれば、大きく崩れて、肝心の内容が読めなくなることもあり、デザイン性とアクセシビリティの両立は難しいところです。しかし、同じように見えるデザインでも、「見る人が、スタイルシートを変更したらどうなるか」ということまで考慮するのとしないのとでは、大違いです。芸術の世界では 1mm ずれても大違いということがあり、見せる側が望んだ通りに見せることが要求されるかもしれませんが、少なくともホームページのデザインというのは、交通標識のデザインなどと同じで、多くの人にとって利用しやすいということが、求められます。その意味では、「見せる側の意図ではなく、見る側の意図」で、デザインを変更できるようなおおらかさが必要でしょう。

デモンストレーションとして、スタイルシートを動的に切り替えて、その効果を確認できるようにしました。 Java Script とスタイルシートに対応したブラウザ (最新の IE や Netscape ) であれば、動作を確認できます。デモのために Java Script を利用しますが、実際にスタイルシートを利用する場合には、 Java Script は不用です。

  1. スタイルシートを使用しない (スタイルシートに対応しないブラウザ)
  2. 大きな文字
  3. 小さい文字
  4. 段組
  5. 非常に狭い画面
  6. 白黒
  7. 強いコントラスト
  8. 標準にもどす