初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL1. スタイルシートってなに?!

★スタイルシートの起源と歴史★

昨今、にわかに注目を集めているスタイルシートですが、一般に「スタイルシート」と呼ばれるのはW3Cによって定義づけらている「Cascading Style Sheet」のことで、それゆえCSSという略称で呼ばれることもあります。そもそもこのスタイルシートなるものは、1994年のW3C設立以前から存在していたもので、当初から、

・ページのおおまかな文書構造はHTML

・デザイン面で必要なレイアウトや装飾の詳細部分はCSS

により指定するという内訳が成立していたようです。

しかし、この1994年という年号を見てお気づきになる方もあるかと思いますが、W3Cが同年10月に設立されて殆ど間もなく、あのWindows 95の出現により、インターネットの世界は爆発的な勢いで普及してゆくことになってしまいます。もともとHTMLは文書構造を指定するための比較的シンプルな言語で、デザイン性についてはスタイルシートによってこれから定義してゆこうという矢先にこのような事態が勃発してしまったものですから、さあ大変。

その時点ではまだW3Cによるスタイルシートの定義が追いついていないにも関わらず、そのような時期から個人サイトを作ろうという人たちには創造性が豊かな人が多く、またネットの利用が拡大されるに従って商用価値も増して来たという事情から、デザイン性に対する要求が一気に高まってしまったんでしょうね。しかし、W3Cは未だもたもたしていてスタイルシートをきっちり定義し、発表してくれる段階には程遠い。事実、この事態にあわてたW3CがやっとこさCSS1を世に出したのは、なんと1996年も終わりの12月だったというんですから、いかにネットの爆発的発展に定義者側の対応が追いついていなかったかが伺い知れます。ましてやこのCSS1というのは実際に使うにはまだ十分なものとは言えず、ともかくHTMLが不用意に拡張されてしまうのを食い止める目的で急ぎ勧告されたものだったようで、更に詳細なCSS2が勧告されるまでには、それから2年を待たなければなりませんでした。とりあえずとはいえ、CSS1が出るまでわずか1〜2年の遅れのように思われますが、ネットそのものが一般的になってからせいぜい10年ということを考えれば、日進月歩の技術開発にとって1〜2年というのは致命的遅滞であったとも言え、それを取り戻すのにその後長い時間がかかってしまうことになるんですね。

ともあれ、一旦これほど勢いよく発展し始めてしまったものは、どんなにあわててもちょっと待ってと留められるものではない。そこでデザインをもっと良くしたいと願う人たちの要求は、「ともかく、あるもんを使え」という方向に行くしかなかったんでしょう。例えばページ・レイアウトにテーブルを使うというのはその代表的な例で、これはテーブル本来の使い方ではないんですが、CSSの不十分な時代に凝ったデザインをやろうと思えばこれが一番実用的だったということで、一般的な方法になったと思われます。このようなデザイン性へのユーザーの飽くなき追及に、当時から主流であったNetscapeやIEも独自のタグを定義したりして、利用者の要求に答えようとして来たようです。ちなみに、このようにしてブラウザごとに拡張されたHTMLタグの中には、後に正式なHTMLタグとして取り入れられたものもあります。

さて、どうせならもう、そのままでいーじゃんかってなもんですが、しかしW3Cもしつこい。このままではいかんということで、1996年のCSS1に続いて1998年にはCSS2を勧告し、ネット世界の流れを徐々にでも当初予定された形に引き戻す努力をしてきました。もちろん、そうしたスタンダードを確立することに大きなメリットがあるからなんですけど、CSS2が世に出る頃にはいかんせん既に主要なブラウザであるNetscapeやIEが全世界に行き渡っており、これらはHTMLでさえ表示の齟齬を引き起こすという独自性の強いブラウザであるため、CSSを使うと更に表示が崩れる場合が多く、クロスブラウザの観点からなかなかCSSを全面的に導入することが出来ない事態ともあいまって、スタイルシートはHTMLと同時に産声を上げながら、長いこと「事実上、使い物にならない」不遇の存在となってしまったのでした。この辺りが、私がさきほど「致命的遅滞」と表現した理由で、一旦あさっての方向に飛んでってしまったものは、元に戻すのにすらこれほど時間がかかってしまうってことですね。

しかし、W3Cがしつこく拘るだけあって、ネット世界から長いこと無視されてたこの「不遇のスタイルシート」は、使いものになりさえすればとても便利で、仕方がないからってことで間に合わせに拡張されたHTMLより遥かに多様な表現が可能な「実は出来のいい子」ということが広く認知されるようになって来ました。それと前後してブラウザのCSS対応も進行しており、昨今ではやっとスタイルシートを使える時代が到来しつつあるというところにまでなってきたようです。ただ、ひところはクロスブラウザと言っても主に最も普及しているNetscapeとIEについて考えれば良かったものが、その後、Firefox、Opera、Safariなどのいわゆるモダン・ブラウザと総称される新たなブラウザも無視できないほど広く使われるようになっており、同じブラウザでもバージョンによって解釈が違うというようなこともあるうえ、世界で現在最も多く使われているだろうと思われるIE6.0のCSS対応は必ずしも完全であるとは言えず、こうした事情からクロスブラウザの観点からゆくと、これまで以上に複雑な事態が生じているということも事実です。その中で、Web標準とは言いながら、CSSを使うと未だ表示が一定しないという問題もあり、一難去ってまた一難というか、まだまだ「スタンダード」のメリットを本格的に享受するには、環境的に長い時間が必要とされそうです。

なにはともあれ、先ほども書きましたように普及してから僅か10年ほどのネット世界のことで、まだ完全に安定するには程遠い状態であるのも当然のことかもしれません。

★なぜ注目されているのか★

さて、特に日本で昨今スタイルシートがうるさいほどに注目されるようになった背景には、SEOや Accessibility、Usability、への意識が高まったことがまず上げられます。これらは、より多くの訪問者を集めることと、より多くの訪問者が利用しやすいサイト作りを目的としていますので、「Web標準」を前提として進められるのも当然ということが分かるでしょう。そうなれば、デザイン性の部分にはCSSを使うというスタンダードな方法が取られることになるのも必然というものです。

また、2000年以降にはブラウザのCSS対応が進んで導入しやすくなって来たことや、既に定着した感のあるブログがCSSを使っていることからも、注目度が高まっていると思えます。

こう書いてくるとスタイルシートって難しいんじゃないの? と思ってしまわれるかもしれませんが、実はそんなことは全くありません。日本人の困ったところに、ちっとも難しくないものを難しがって有難がるという傾向が挙げられますが、HTMLが普及し始めた頃もそうだったように、スタイルシートもその実際よりもはるかに脚色されて難しいもののように言われているだけで、前章までで紹介してきたHTMLの書き方を理解できるなら、スタイルシートはその延長線上にあるだけのものと考えて大丈夫です。HTML自体も更にXHTMLへと進化しているのですが、これも基本はHTMLなので、初心者の方はまずはHTMLから押さえることをオススメしたいですね。

では、次章からは実際にスタイルシートとは、どのようなものなのかをご紹介してゆきましょう。

>> 初級篇2.VOL2.スタイルシートのさまざまなメリット・その1