2005/08/13
いつもこの「電脳生活雑感」をご覧いただいている全国37人（推定）の皆様におかれましては、お気づきのことかと思われるが、先日から若干ページのデザインが変わっている。というのも、遅ればせながらスタイルシートを導入したためである。
そもそも、私がページを作り始めた1998年当時は、この「電脳」も含め、まだHTMLそのものでページレイアウトを行おうとしていたページが多かった。本来HTMLは文章構造を論理的に修飾し、Webブラウザなどのエージェントは、その文章構造をもとに、情報を見やすい形（Webページ）に整形して見せるものだが、Webページが「見栄え」を重視するようになって、当時の二大ブラウザであったNetscapeNavigatorやInternetExplorerは、独自に「見栄えを良くする」エレメントを用意しては、互いにそれらを取り込み拡張していった。
このように「文書を論理的に記述する」のためのHTMLがいつのまにか「文書の見栄えをよくする」ものに成り果ててしまった状況を打開すべく、W3C(World Wide Web Consortium)はHTML4の仕様を策定した。HTML4は、これまで見栄えのために用意され、半ば標準となってきたFONT（フォントの色や大きさを指定する）や、CENTER（中央揃えにする）などのエレメントの使用を推奨せず、そのような見栄えの指定はスタイルシートで行うことを推奨している。
とは言え、最初に出来たスタイルシートの仕様であるCSS1（Cascading Style Sheet 1）が策定された当時は、ブラウザ側の対応状況がまだまだ低く、使える状況にはなかったのも事実である。HTML的には正しくても、それだけでは見栄えの良いウェブページにはならなかったのである。
その後、ブラウザも徐々に進化して、現在よく使われているブラウザ（InternetExplorer、Firefox、Mozilla、Netscape、Opera、Safariなど）の最近のバージョンでは、基本的なスタイルシートをほぼ実装するようになった。かつての見栄えをコントロールしてきたHTMLのエレメントに頼らなくても、ほとんどのブラウザで同じように見えるようなスタイルがスタイルシートで表現できるようになってきた。スタイルシートで見栄えを指定するというHTML4の理念がようやく現実的になってきたと言える。
というような背景もあって、このたびちょっとした事情により、スタイルシートでなければ表現不可能なページを作る必要に迫られたのをいい機会に、遅ればせながらスタイルシートを勉強し、自分のページにも適用してみた次第である。
スタイルシートは、HTMLの中に直接記述することもできるし、スタイルを既定したファイルを別に作り、それを参照して使用することもできる。実際にはページのスタイルというものは、ある程度共通に使う部分が多いため、後者の方法で複数のページからスタイルを既定したファイルを参照する方がよい。今後ページのデザインを変更する必要に迫られても、スタイルシートの定義ファイルを変えるだけで、サイト内の全ページのデザインをすべて変えることができるので、管理も楽になる。
基本的には、スタイルシートはエレメントごとにスタイルを既定することができ、また、エレメントにclassもしくはidで識別される名前をつけることで、そのclassやidを持つエレメントにのみスタイルを適用することもできる。言ってみれば、同じエレメントでも意味が違うものにそれぞれその意味を表す名前をつけることで、その名前ごとにスタイルを指定することができる。とまあ、抽象的な話を文章で書いても知らない人にはちっともわからない説明になってしまい申し訳ない。
ともかくそんなわけで、と強引に話を進めてしまうが、論より証拠。この電脳や、あるいは私がWebmasterを務めている劇団のページは、スタイルシートを適用したページに変更されている。どうだろうか。左右にマージンを入れ、行間を少し開けただけでも、以前に比べて随分読みやすくなったのではないだろうか（少なくとも表示上は）。
もちろんスタイルシートのできることはこれだけではなく、文字の大きさやフォントを指定したり、文字に色をつけたり、前後左右に枠線をつけたり、背景に色や画像をつけたり、様々な指定ができる。ただまあ、スタイルシートも、やたら使えばいいというものではなく、あれこれ使えばかえって読みにくいページになることもある。こういった修飾は凝り出すときりがないのだが、あくまでスタイルシートはWebページを効果的に見せるための手段であって目的ではないというのは、JavascriptなどをはじめとするWeb技術すべてに当てはまる教訓である。