新・ユーザースタイルシートのススメ

導入

ユーザースタイルシートを使うと、ウェブページのフォント、文字色、背景色、文字の大きさ等を自分の思いのままにカスタムすることができる。そのウェブページのHTMLレベルの構造をよく観察することによって、かなりの程度レイアウトを変更することも可能となる。

通常のGoogle検索結果 カスタマイズ後のGoogle検索結果

この二つのスクリーンショットは、前者が普通にレイアウトされた2007年現在のGoogle検索結果、後者は大きな画面でその検索結果を一望できるよう、ユーザースタイルシートでカスタマイズしたものである。よく利用するウェブサイトを注意深く観察することにより、自分の環境に合わせて最適化することも可能となる。このスクリーンショットで利用しているユーザースタイルシートの導入方法はGoogleのマルチカラム化を参照。

普通の閲覧者は、せいぜい文字サイズを大きくしたいとかフォントを変更したいと思うだけかもしれない。とりわけ文字サイズは閲覧に関して重大な障害となりうることから、洗練された最新のブラウザは文字サイズを自由に変更する機能、あるいはもっと本質的な、画像を含めたページ全体を拡大、縮小する機能をネイティブに実装していることが多く、ユーザースタイルシートに要請される機能は年々その重要性を失ってきてはいる。しかしClearTypeのような技術が普及するに伴って、ウェブページの制作者によるフォントの指定がその利用を妨げ、本来得られるであろう可読性の向上を妨げているという問題もようやく顕在化してきた。

汚いフォント画像。読むスピードが落ちる。 きれいなフォント例画像。可読性が高い。

この例を見比べてみると、高品質なフォントによって文章の可読性、読みやすさがどれだけ向上するかを直感的にも理解できよう。ウェブページ制作者によって適切でないフォントが指定されていた場合、ブラウザのフォント設定では変更できない場合も少なくない。したがってその閲覧者の環境において最も高品質なフォントでいつもウェブページを読むためには、ユーザースタイルシートを利用するしかないのが現状である。

ユーザースタイルシートの定義

まず、スタイルシートとは文書の表現方法の指定に特化した構文の集合体のことであり、CSSに限ったものではない。文書の表現方法の指定がなされているならば、たとえばJavascriptファイルなどもスタイルシートと呼んでよい。もっとも典型的な例として、Netscape Navigatorが実装したJavascript Style Sheetがある。文書の内容を書き換えたり、生成したりするものでない限り、世間の多くのJavascriptファイルは広義のスタイルシートと呼ぶことが許されるだろう。

さてユーザースタイルシートは、ユーザーが特定の文書に指定したスタイルシートのことである。もちろんCSSに限らないし、構文はユーザーから隠蔽されていることもある。

webmaster@jintrick.net
Published: 2001 on Personnel, Updated: 2007-09-17