なぜ CSS を使用した方が良いのですか？

Dreamweaver MX 2004 の発売以来、私はその新機能や実力を、既存ユーザーの方々だけでなく、新しいユーザーの皆さんに対しても紹介する機会がたくさんありました。ほかの製品デモのときもそうなのですが、Dreamweaver MX 2004 の新機能が、カスケーディングスタイルシート （CSS） を導入する際に、いかに素晴らしい働きをするかを述べつつ、Dreamweaver の素晴らしさを伝えていきます。

ところが、先日、ある初心者ユーザーから質問を受け、私はハッとしました。「なぜ CSS を使用した方が良いのですか？」と質問されたのです。HTML や CSS を毎日使っている方々は、そのメリットについて良く知っていますが、それ以外の、つまり今これを読んでいる皆さんの中には CSS を導入することによるメリットをご存知でない方が居られるということに、そのとき気がつきました。また、単に CSS を導入することによる具体的なメリットが伝わっていないだけなのかもしれません。とにかく、この記事を書くことで、私はその初心者ユーザーの質問にお答えすることにしました。

CSS の歴史

CSS のメリットを述べる前に、ここで少しだけその歴史についてふれておきましょう。Web 上で使われる技術の標準化を進める国際学術研究機関、W3C は、1996 年 12 月に CSS レベル 1 を発表し、CSS を使用することを推奨し始めました。CSS レベル 1 では、HTML ページ内で使用する各種属性が定義され、従来の font タグや、色およびマージンの設定といったページの見栄えを定義するマークアップに取って代わるものに限られていました。そして 1998 年5 月、W3C は CSS レベル 2を発表し、CSS レベル 1を強化するとともに、各種要素を配置するための属性を CSS に盛り込みました。この新たな属性は、ページの見栄えをデザインするために実践されていた table タグの乱用 （または誤用） を改善するものでした。現在、CSS 規格の最新改訂版は CSS 2.1 となっています。CSS 2.1 では、いくつかの属性がチューンアップされているとともに、現行のブラウザにおいて実用性の低かった属性が排除されています。

新しい技術にはよく見られることですが、残念ながら CSS が浸透するには時間が掛かっているといわざるをえません。主な理由のひとつは、ブラウザの問題です。CSS の使用推奨が始まった当時、主要ブラウザであったNetscape Navigator (NN) には、CSS をサポートする機能が基本的に存在しませんでした。一方の Microsoft 社は、Internet Explorer バージョン 3 において非常に限られた CSS サポート機能を追加しましたが、当時の Web デザイナーの多くは (筆者も含め)、NN をページ作成時の基準プラットフォームとして捉えていました。

ここ何年かの間、ブラウザメーカーは新しいバージョンをリリースするごとに CSS サポート機能を拡張し、現在では Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera、Safari、これらすべてが CSS を完全にサポートするようになりました。しかし、これは Web デザイナーや Web デベロッパーを悩ます問題が完全になくなったということではありません。前述のブラウザすべてが CSS レベル 2 に対応していると言っても、ブラウザに依って準拠の度合いがまちまちであるため、一部の属性がフラストレーションの原因になる場合があります。つまり、テストを繰り返しおこなう必要がまだ残っているということです。しかし、CSS 規格の主要な属性を使用している限り、ページは正しく表示されます。

では、なぜ W3C はそもそも CSS 規格を提唱する必要があったのでしょうか？また、CSS は、HTML ベースの Web サイトやアプリケーションを作成するときに、一体どのような意味を持っているのでしょう？私が思うに、CSS の必要性とメリットは大きく分けて、柔軟性、レンダリング、アクセシビリティの 3 つの観点から語ることができると思います。

柔軟性

おびただしい数のネストされたテーブルを使いながら、細心の注意を払ってページをレイアウトしたあとで、クライアントが「ちょっとした」修正をリクエストしてくる。ほとんどの Web デザイナーや Web デベロッパーは、こんなパニックの瞬間に遭遇した経験があることでしょう。その修正は、「そのイメージをもう少し左に動かせる？」といった単純なものから、「そのヘッダーが気に入らないからフォントをもっと大きくしてくれる？ついでにフォントの色を変えてみたらどう？」といった大がかりな修正までさまざまです。もし、これらの修正がページ数の少ないサイトに対してならば、深呼吸をしてから、イライラするこの更新作業にとりかかることもできます。しかし、規模の大きなサイトの場合 （しかもそれが普通になってきています）、一見単純に見える修正でも、大変大がかりな作業になってしまいます。

こういったパニック状況をもたらす原因は何でしょう？答えは、ページの見栄えを定義するマークアップがページの一部として組み込まれていることです。皆さんが作業しているサイトから任意のページを取り出して、実際に font タグや table タグの数を数えてみてください。仮にこれらのタグを各ページのコードから排除し、外部ファイル上で管理できればどうでしょう。こうすれば、一つの外部ファイルを編集するだけで更新作業が完了します。CSS を使用するメリットが少し見えてきましたか？

単一 (もしくは少数のバリエーション) の外部スタイルシートを利用して複数のページをデザインしておけば、外部スタイルシートを更新し、それをアップロードするだけで、サイト全体へ更新内容を反映させることができます。

また、従来のテーブルによって構成されているレイアウトのサイトナビゲーションを、単に左から右へ移動することが、どれほど大変なことかを想像してみてください。退屈で単調な作業を何時間も続けなければなりませんね。しかし、ページ内の要素配置を CSS 属性で指定しておけば (この手法は CSS-P とも呼ばれています）、外部のスタイルシートに記述されている float 属性や position 属性を修正するだけで簡単にページのレイアウトさえも更新することができます。メリットはもっとあります。同じスタイルシートを使用しているサイト内のすべてのページが自動的に更新されるのです！

レンダリング

ブロードバンドが主流となってきた最近では、多くのデベロッパーがブラウザにおけるページの表示速度に注意を払わなくなってきています。しかし、ターゲットとなるオーディエンスの中には、ダイアルアップ接続で Web を閲覧している方々が存在していることを忘れてはいけません。ページ表示速度が遅くなる主な要因としては、従来のテーブルで構成されたレイアウトが挙げられます。

これは、ブラウザがサーバーからページを受け取る際に、複雑にネスト化されたテーブル構成を「理解」しなければならないからです。ブラウザは、まず最も深くネスト化されたコンテンツを見つけ、その後徐々に一番外側にある body タグへとコードを読み進みます。この工程を終えてはじめて、ブラウザはコンテンツを画面上に表示することができるのです。

一方 CSS を利用した場合、ブラウザはサーバーからコンテンツを受け取った時点で、即座に画面に表示するためのレンダリング処理を開始します。プレゼンテーション用マークアップ、つまり表示の仕方を指示するマークアップが少ないためにそれが可能になるのです。

外部スタイルシートを使用することには、レンダリングに関する隠れたメリットもあります。従来のテーブルを使った手法では、ブラウザは読み込み、分析、表示という作業を個々のページに対して行わなければなりません。つまり、サイト内の 30 ページ目を表示する場合でも、ブラウザは 1 ページ目を表示するのと同じ作業を繰り返さなければなりません。

しかし、外部スタイルシートを利用する場合、一番初めのページが表示された段階で、リンクしているスタイルシートがブラウザのキャッシュに保存されます。したがって、同じスタイルシートを利用している 2 ページ目以降は、ブラウザのキャッシュを利用して素早く読み込まれるようになります。

最後にお話しするレンダリング関連のメリットは、私に映画「アマデウス」を連想させます。映画のなかで、モーツアルトは彼が作ったオペラについて皇帝に感想をもとめます。すると皇帝は、素晴らしかったが長ったらしくて退屈だ、と答えます。モーツアルトに詰め寄られ、皇帝は「音符が多すぎる」のが問題だと説明します。Web デザインにおいても、同じことが言えるでしょう。音符はつまり HTML コードというわけです。コードが多ければ多いほど、ブラウザがページを「理解」し、表示するまでに時間が掛かるのです。

皆さんは、Office 製品が煩雑なコードを生成し、ページ表示に関係のない情報をドキュメント内にばらまく、といった噂を聞いたことがあると思います。Dreamweaver を利用していれば、このようなことは起こりませんが、それでも「音符が多すぎる」という過ちをおかす危険性は存在します。従来のテーブルで構成されたデザインがその例です。

ページデザインに CSS を導入すれば、たちまちクライアントがダウンロードしなければならないコード量が減少します。単にページから font タグを一掃するだけでも、驚くほどのコード量が削減できます。また、完全に CSS-P 手法で構成されたサイトデザインに移行すれば、多くの場合、実に約 50 % 以上ものコード量削減が実現できます。当然、コード量が減れば、ページの読み込み速度も上がります！

アクセシビリティ

最近、アクセシビリティという言葉をよく耳にすると思います。多くのデベロッパーは、アクセシブルなサイトの構築が大切であることは理解していますが、たいていの場合、政府や教育機関のサイトに関わっていない限り実践していないのが現状です。アクセシビリティというと、デベロッパーの大半は、画像に alt 属性を付ければ良いという程度にしか考えていませんが、アクセシビリティに関して考慮しなければならないのは、実際それだけではありません。CSS を導入するつぎのメリットとして、アクセシブルなサイトを容易に構築できるということが挙げられます。

アクセシビリティについて考える際の重要なポイントは、スクリーンリーダーのような障害者支援技術がどのように画面を「読み上げていくか」という点です。しかし、これは CSS を導入することによって改善可能な重要ポイントでもあります。従来のテーブルによって構成されたページの場合、スクリーンリーダーはコンテンツをどの順番で読み上げるかを判断することが大変困難です。複雑にネスト化されたテーブルに直面したとき、スクリーンリーダーがいかに混乱するか考えてみてください。コンテンツを読み上げるべきか、飛ばすべきか。もし、読み飛ばした場合、どの順番でつぎのコンテンツに移ればよいのか。これは、スクリーンリーダーにとって非常に紛らわしい問題です。

あるページを見たとき、皆さんは瞬時に興味のあるコンテンツを画面上で見つけ、ナビゲーションなどといったページ上部にある情報を簡単に無視することができます。しかし、視覚障害者の方々はそれができません。スクリーンリーダーがページの最初からコンテンツを読み上げ、実際に興味のあるコンテンツが読み上げられるまで、すべての情報がスクリーンリーダーによって処理されるのを待たなければならないのです。

もちろん、スクリーンリーダーがナビゲーションをスキップできるようにするテクニックもありますが、それはたいていナビゲーションやコンテンツ内にイメージを置き、そこにリンクを張るという手法です。こういったテクニックは有効ですが、逆に混乱をまねく原因となることや、ほかのユーザーに見えてしまうという問題点もあります。一方、CSS を利用した場合、視覚障害者以外のユーザーやマウスに認識されない形でページに不可視エレメントを定義でき、スクリーンリーダーはこの不可視エレメントをもとに、迅速かつ効果的にドキュメント全体をナビゲートできるようになります。

CSS を導入してプレゼンテーション用マークアップを排除すれば、スクリーンリーダーは実際のコンテンツのみ遭遇するようになります。また、先述の CSS-P を利用した手法でページをデザインする場合、コンテンツの「流れ」に注意してページを構成することが重要になります。言い替えれば、ページを論理的に順序立てて構成することが必要だということです。

皆さんはこの記事を読みながら、情報の「流れ」を追うことができています。しかし、仮にこのページがネスト化されたテーブルを利用して、複数のコラムのレイアウトであったとしたら、現在の段落はページ右上に配置されていたかもしれません。これでは、スクリーンリーダーは記事の最後の方でこのパラグラフを読み上げるべきだということを知ることができません。

CSS-P を利用してページをレイアウトすれば、例えこの段落をページ右上に表示したとしても、HTML コード内では、本来、記事の「流れ」としてこの段落があるべく場所に、そのまま文章を配置しておくことができます。これは一歩進んだアクセシブル体験と言えます。

まとめ。そして次のステップへ

Web 制作に CSS を導入することで得られるメリットをお分かりいただけましたか？もちろん、習得しなければばらないことはたくさんありますので、Macromedia デベロッパーセンターにある他の CSS 関連記事もぜひお読みください。CSS のメリットなどをさらに理解するためや、CSS を段階的に導入していく上で、きっと役に立つはずです。今後も私は CSS のチュートリアルをここで提供していく予定です。皆さんもぜひ CSS を利用してみてください。