スタイルシートの効果的利用法

カスケーディングスタイルシート（CSS）はエレガントに設計されたウェブの拡張であり、見た目とコンテンツを分離するというウェブの理想を取り戻す上では最大の希望の星でもある。ウェブは究極のクロスプラットフォームなシステムである。同じコンテンツが実に多様なデバイス上で表示されるわけで、そのためには、ページには情報の意味を記述するべきであり、見た目の詳細については、サイトが定義するスタイルシートとユーザの設定内容を合わせた（あるいは「カスケード」）したものにまかせるべきだ。WebTVの登場に際してページが崩れた経験をお持ちなら、スタイルシートファイルをひとつ用意するだけで新たなページデザインにできるという機能がきっと気に入るだろう。何千ものコンテンツページを修正する必要はないのだ。

中央集権的スタイル

サイト内の全ページに、ひとつのスタイルシートを使おう（あるいは、ページごとによほど違ったニーズがあるなら、数ファイルで連携をとってもいいだろう：例えば、技術文書 vs. マーケティングページといったように）。スタイルシートの最大の利点は、ユーザがあなたのサイトをいくらナビゲートしても、視覚的な連続性を保てることだ。伝統的な出版の世界では、ひとつの書体を基盤にして製品を印刷する価値が知られていた。雑誌や新聞のどのページを開いても、テキストや基本レイアウトは変わらない。ウェブサイトでも、サイト上の全ページを同じスタイルシートにリンクしておけば、同様にブランドの一貫性を保てるだろう。

埋め込み型ではなくリンク型のスタイルシートを用いること。これなら外部のファイルを参照しているだけなので、1箇所変更するだけでサイト全体の見た目を更新できるというメンテナンス上の利点を得られる。合わせて、ページ上のスタイル定義は削除しておこう。その分ファイルサイズが小さくなり、ダウンロードも速くなる。サイト全体で利用するスタイルシートがひとつなら、このファイルのダウンロードも1回で済んでしまう。

各サイトごとに、すべてのスタイルシートは単一のデザイングループに集約しておこう。理由は2つある。第1に、スタイルに一貫性を持たせ、スタイルシートの最大のメリットを享受しようと思うなら、中央集権的デザイン以外に方法はないということ。第2に、ウェブコンテンツ制作者のほとんどは、デザイン能力も、優れたスタイルシートを書く能力もないからである。スタイルシートをサポートしたワープロでの経験から言うと、ほとんどの書き手はスタイルシートをすっかり台無しにしてしまう。従来のデスクトップパブリッシングでなら、スタイルの効果は比較的よく理解できた。なぜなら、単一の規則的な出力形態を備えたWYSIWYGの環境だったからだ。対応プラットフォームが多様なため、ウェブはWYSIWYGではない。さらにいうと、ウェブのスタイルシートはカスケード式である。つまり、サイトのスタイルシートがユーザのスタイルシートと合わさって、初めて最終的な見た目が決まるということだ。この違いがあるために、ウェブのスタイルシートは、結果的に自分の画面で見えているものとは異なった表示になる可能性があることを理解したスペシャリストにデザインしてもらうことが重要となる。

啓蒙活動を活発に行うために資金を割り当て、中央集権的に定義されたスタイルシートの利用法をコンテンツ制作者に教えよう。スタイルシート機能付きのワープロが使えるからといって、それだけでみんながスタイルの概念とその利用法を理解してくれるだろうとは思わないことだ。調査の結果では、ほとんどのユーザは、ワープロのスタイルシートの使い方をひどく間違っている。主なワープロに搭載されたスタイルシート機能のユーザビリティが非常に低いのも理由だろうが、スタイルそのものが難しいということも原因のひとつだ。スタイルシートには、各スタイルとその使い分けについて説明した簡潔なマニュアルをつけておこう。たくさんの実例を取り入れ、生のHTMLコード（説明文書の利用形態としては、そこに示された実例をカット＆ペーストするという使い方が主流だ）と、正しくコードできた場合にどう見えるかを、複数のプラットフォーム上の主なブラウザで示した画面ショットを入れておくこと。画面ショットはクリッカブルイメージマップにしておいてもよい。使いたい効果の上でクリックすると、そのスタイルについて説明した文書にリンクするわけだ。特に、よく似たスタイルがいくつかある場合、その違いと使い分けについて説明しておくことで、エラーをかなり防止できるだろう。

リンク式のスタイルシートと中央集権的デザインの方がいいとは思うが、必要に応じて各ページ制作者が、各自のページ用に追加の埋め込み型スタイルを作れるようにはしておくべきである。絶対に必要な場合を除いて、できるだけこれは避けたほうがいい。だが、あるスタイルがどうしても必要なのに、それが集約的なスタイルシートには入っていないというケースはありうるだろう。同じ効果を必要とするページがたくさんあるなら、サイト全体のスタイルシートに追加するべきだ。だが、リンクしたスタイルシートに、たった1回しか使わないスタイルを満載するような愚は冒すべきでない。1回しか使わないスタイルはリンクせず埋め込んでおくべきである。ページ自体はあいかわらず全体のスタイルシートにリンクしておくが、必要に応じてそれをローカルな埋め込み型のスタイルで上書きするのだ。こうしておけば、将来、集約的なスタイルシートに変更を加えても、その効果が変更したページにも最大限反映されるというメリットがある。

実装にあたってのアドバイス

• スタイルシートをオフにしても有効なページでなくてはならない。例えば、同じ単語を少しずつずらしながら何回か繰り返すことで影文字の効果を出すというようなトリックは使わないこと（スタイルなしでみると、テキストはまったく意味をなさなくなる）。古いブラウザを使っているユーザ、視覚障碍のあるユーザ、スタイル機能をオフにしているユーザ（バグがあるとか、あるいはあなたの設定したスタイルがまったく気に入らないという場合）をサポートするには、スタイルシート抜きでもきちんと見えるようにすることが必須である。幸い、このルールに従っているかどうかをチェックするのはとても簡単だ。ブラウザのスタイルシートをオフにして、ページを再読み込みするだけでよい。
• 使用フォントは2つ以内に押さえる（コンピュータプログラムなどの特殊なテキスト用に3つ目を追加してもいい）。デスクトップパブリッシング初期の教訓を忘れてはいけない。できるからというだけの理由でむやみにたくさんのフォントを使うと、身代金要求の脅迫状のようになるだけだ。普通は、本文テキスト用にひとつ、もうひとつは見出し用に太目のものを使えばいい。注意して欲しいのは、あるテキストのクラスをスタイルシートで定義する際に、代替フォントをたくさんリストしておくのは構わない（むしろ推奨される）ということだ。リスト中で利用可能な最初のフォントをユーザのブラウザが選び出して、ページ内で利用してくれる。ユーザが目にするフォントはひとつだけであり、タイポグラフィ的にも統一の取れたサイトになるわけだ。フォント名のリストは同じ順番で並べておくことが重要だ。なぜなら、ブラウザは、利用可能なフォントのうちで一番最初のものを採用するからだ。
• フォントサイズを絶対値で指定しない。あらゆるテキストは、ユーザが設定した基本フォントサイズに対する相対値で指定すること。例えば、大きなテキストは「200％」と定義できる。これはつまり、ユーザが本文テキストに12ポイントを指定していれば24ポイントに、ユーザが本文テキストに10ポイントを指定していれば20ポイントに設定されるということだ。ユーザが大きいフォントを好むか、小さいフォントを好むかは、モニタのサイズと解像度、ユーザの視力など様々な要因がからんでいる。私の環境で見るとテキストが小さすぎて読みづらいというウェブサイトに行き当たり、頭を抱えることがあるが、「文字のサイズを大きくする」ボタンをクリックしても効かないことがあって、とても頭に来る。というのも、フォントサイズがポイント数の絶対値で定義してあるからだ。
• ユーザの設定を上書きする!important属性は使用しないこと。ユーザ自身が!importantと評価するくらいはっきりした好みを持っているにも関わらず、これを無視することが正当化できるというようなケースはまず想像できない。よって、!importantは、ユーザのスタイルシート用にとっておくこと。
• スタイルシートが複数ある場合、一連のスタイルシートすべてにおいて、同じ概念を表すCLASS名は同じにしておくこと。異なったCLASSが同じものに適用されていたり、概念的には同じなのに、あるスタイルシートに存在するCLASSが別のスタイルシートにはなかったりすると、2つ、あるいはそれ以上のスタイルシートを併用しているコンテンツ制作者は混乱してしまうだろう。例えば、文書の著者名を表すCLASSを用意するなら、あなたのスタイルシート全部にこのCLASSを入れるべきである。ただし、見た目については、文書の種類に応じて異なった定義になっていてもいい。

CSSロゴのボタンはすてきだが、サイト内のそこらじゅうにこれを貼り付けるのは感心しない。特にホームページには不要だ。サイトがどのように実装されているかなどということは、ユーザにとってはどうでもいいことだ（彼らが「このサイトについて」リンクをクリックした場合は除く – CSSボタンを置くなら「About」ページがうってつけだ）。やり過ぎはかえってマイナスというのがホームページの大原則だ。ボタンやオプションの数が多いほど、すばやく必要な情報にたどりつけるユーザの数は減る。（この法則から考えると、何種類ものブラウザ供給元に対応したダウンロードボタンをくっつけているホームページが多いのは実に不思議だ。自分のサイトのユーザビリティを下げてまで他社のための無料広告を入れるなんて、私の理解を超えている。）

くわしくは

スタイルシートに関する本で唯一推薦に値するのは、Hakon LieとBert Bos共著の『Cascading Style Sheets, Second Edition: Designing for the Web』である。書籍カバーの広告もたまには正しいことがある。この著者たちは、ウェブコンソーシアムのスタイルシートプロジェクトのリーダーであり、スタイルシートに関する本当の「世界的権威」なのだ。ウェブのスタイルシートに関しては、これが究極のリファレンスだ。

データ資料：7月初めの2週間で、上記リンクを経由してAmazon.comに注文された本から得られた紹介料とこのコラムの読者総数との比率は、ページビューあたり4.5セントに値する。金持ちにはなれそうにないが（それにこの本を薦めたのも、それが気に入ったからで、たった数セント欲しさにやったことではない）、マイクロペイメント方式が広告（通常ページビューあたり1～2セント）以上の価値を発揮できるという証拠になるだろう。

1997年7月1日