CSS（カスケーディングスタイルシート）とは、HTML、XMLなどで書かれた文書の表現方法を提供する仕組みのひとつです。ADP: ウェブデザインテクニックでは、CSS（やDOM）を用いたデザインTipsを提供する予定です。今回は、まず、CSSのメリット・アドバンテージとはなんなのか、および、なにに気をつけなければならないのか、について、制作者の立場から軽くまとめます。
CSSのメリットとしてまず第一に、多様なアクセス手段の提供があげられます。HTML文書に記述された「伝えたい内容」は、パソコンのディスプレイ以外にも、音声ブラウザ、携帯電話、PDA、家庭用テレビなど、様々な手段によって閲覧者に届けることが可能です。CSSを適切に使えば、パソコンのディスプレイで見たときには鮮やかなデザインになり、音声ブラウザを使って聞くことも可能で、携帯電話やPDAからも気軽にアクセスでき、家庭用ゲーム機や最近の高機能テレビを使っても情報が伝わる、ということが可能になります。
ページ制作者は、パソコン用、携帯用、などいくつも似たようなHTMLを作ったり、データを変換する大規模なサイト構築プログラムを導入するために多額の出費をしたりせず、CSSを使うことによって、ひとつのHTML文書にアクセスするための多くの手段を提供できます。
ウェブページ制作の歴史において、はるか昔は、ほかとは違うデザインを実現するためにクリッカブルマップを使って大きな１枚絵を提供し、Netscapeが普及してからは、枠の表示されないテーブルを使ってレイアウトを行う、というのがテクニックとして存在しました。Internet Explorerが出てきてからは、クロスブラウザの目的のもと、二大ブラウザでいかに同じように表示させるかに心血が注がれました。現在では、最大シェアを持つWindowsのInternet Explorerでうまく表示できれば、及第点がもらえると広く思われています。
それでは、たとえば、日本だけで数千万台あり、日々進化を続けるネット対応携帯電話に、さしてコストをかけなくても対応できることが広く知られるようになったら、どうなるでしょうか。ページ制作者にとって、そのテクニックを知らない、使えないことが、どれだけのデメリットになるか、もしくは、ページコンテンツ提供者にとって、ネット対応携帯電話に対応していないページを提供することが、どれだけのデメリットになるか、ということです。
すべての手段でアクセスできるようにする、という野望を持たなくても、すぐに実現できるテクニックもあります。たとえば、印刷用のページデザインをCSSで提供する方法です。印刷したのに、印刷時にはさして重要ではないメニューが大きく幅を取ってしまって、右側が切れてしまい、困ったことは誰しもあるはずです。CSSを使えば、上で述べた話のとおり、ディスプレイ用のデザインと印刷用のデザインを別々に提供できます。
大部分は上と重複しますが、「手段」を基準にするのではなく、「使う人」を基準として、多くの人からのアクセスを可能にする、ということもCSSによって実現できます。視覚障害者に対応する、高齢者に対応する、といった、「狭い意味での」アクセシビリティは、CSSによって改善が可能です。また、閲覧する人がそれぞれ自由にCSSを選択する方法も用意されています。
メリットの二番目は、CSSに表現を担当させ、HTML文書から表現を分離することによって、HTML文書を単純化させることが出来る、ということです。HTML文書の単純化は、ページ制作者にとってはふたつの効用が、ページ閲覧者にとってもひとつの効用が考えられます。
ページ制作者にとっての効用のひとつは、ソースの見通しがよくなり、更新がしやすくなることです。テーブルレイアウトをほどこされたHTML文書を、半年たってからテキストエディタで更新するのは非常に苦痛ですが、CSSでデザインされるよう設計されたHTML文書の更新は比較的簡単です。また、DOM（ドキュメントオブジェクトモデル）を利用したJavaScriptなどを書く際も、簡単なHTML文書を相手にすることは設計コストの削減を可能にします。
ページ制作者にとっての効用のふたつめは、いわゆるSEO（検索エンジン最適化）です。検索エンジンは、あるキーワードに対して、だらだら長い文書にうずもれているページを低く評価し、凝縮され、簡略にまとめられたページを高く評価します。よって、内容がたとえ変わらなくも、短いHTML文書はより望ましいものになります。CSSによってデザイン部分を外部に追い出した短いHTML文書は、必然的に検索エンジンでの順位を引き上げ、アクセス数を目に見える形で上昇させます。
ページ閲覧者にとっての効用は、サイト内のページを見るたびに、長いHTML文書を毎回読みにいかなくて済むため、ページの総読み込み時間が短くなることです。ブロードバンド化が進んだ現在では、このことの重要性は低下していますが、待ち時間は短ければ短いほど、閲覧者にとって望ましいことにかわりありません。
CSSのメリットの三番目は、いくつか、ほかの方法では実現が面倒な表現が可能になることです。ディスプレイでの表示や印刷において読みやすい行間を設定する、などが代表例でしょう。現在では、それほど重要でないように見えますが、しだいに、CSSでないと実現できないことが増えていくことが予想されます。
ここまであげたCSSのメリットをふまえ、では、CSSの問題点は何でしょうか。考えるべき点は、CSSを適切に利用するためのコストです。多様なアクセス手段を提供するためには、さまざまなアクセス手段で実際にアクセスできるようにCSSを書かなければなりません。ほんとうにそれでアクセスできるのか、ちゃんと閲覧できるのかを知るためには、テストも必要になります。「広い意味での」アクセシビリティを改善するためには、アクセス手段それぞれにおける特徴を知り、ブラウザの実装の不備を知り、回避の方法を知り、それにあわせた設計をし、かつ、テストを繰り返さなければなりません。実際には、CSSのみならず、HTML文書もいろいろ手を加える必要があります。たとえば、巨大な画像は、現時点の携帯電話では読み込めませんし、それ以前に、長い文書も読み込めません。2/23という表記は、現時点での主要な音声ブラウザにおいて、日付だとは認識されず、「にじゅうさんぶんのに」と読まれることが知られています。
CSSを使用する場合、これら費用対効果を熟慮しなければなりません。ADP: ウェブデザインテクニックでは、これらをふまえ、どうしたら、CSSを効果的に利用できるようになるか、について自らも実験しつつ、情報を提供していきます。現在はまだ、上のメリットはこのサイトでもほとんど実現できていませんが、携帯電話のボタン1文字目ですべて打てることを想定してhttp://adp.daa.jp/ を使っているわけですからね。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/46