ふりかけ味スタイルシート(前編)

CSS(かすけーでぃんぐすたいるしーと)をホンカクテキに使ってページデザインを使ってるサイトというのは、かならずといっていいほどこういう文章があったりしますが、まぁご多分に漏れずということで。

スタイルシートとはなんぞや。

ぶっちゃけて言うと、スタイルシートというのは白いゴハンにかける「フリカケ」です。HTML にふりかける「トッピングの味」です。まず能書きなんぞは置いといて、この「フリカケ」の味をいろいろ変えてみるのを試してみてください〜。

  • JavaScript が ON になっている必要があります。
  • スタイルシート(CSS)に対応したブラウザである必要があります。
  • それなりに DOM に対応している必要があります。
  • したがって、Netscape Navigator 4.x, Opera, iCab, Safari 等では動作しません。
  • これら動作条件を満たす場合のみ、スタイル選択メニューが表示されます。

スタイルシートとひとことにいっても実はイロイロ種類があったりしますが〜、Webブラウザで現在主に使われてるのはカスケーディングスタイルシート(CSS)です。Web 関連の話題で「スタイルシート」と言ったときは CSS のことを指すのがフツウです。

フリカケだからお手軽で柔軟

さて、フリカケやトッピングの具である CSS でありますが、もしごはんが始めからドライカレ〜味だったりして、そこに梅しそ味のフリカケをしたら、くそまずいですよねたぶん。五目御飯にタラコフリカケもいやだなぁ…。フリカケするならごはんは白飯、のが都合がよろしいわけです。

白飯じゃない味付きご飯、つまりはじめから味を付けられている HTML では、フリカケ(CSS)でお手軽に味を変えるのがむつかしくなるのです。古き時代の HTML では、HTML ソース中に、

<p align="center">
    <font size="4" color="red">
        <b>人情バイオレンスっっ!!</b>
    </font>
</p>

という感じで直に具体的な味付けの指定(スタイル情報)を練り込むのがフツウでしたけど、フリカケ CSS で多彩なメニューを用意しようとするなら、これは邪魔な味にしかならないです。だから、 HTML からこのような具体的なスタイル情報を抜かないと立派なフリカケシェフ(なにそれ)にはなれません。HTML から具体的スタイル情報を抜いて CSS へ分離するとこんなかんじ。

CSS の記述:
p { text-align: center }
em { font-size: larger; color: red; font-weight: bold; font-style: normal }
HTML の記述:
<p><em>人情バイオレンスっっ!!</em></p>

上の切り替えシステムで、「男は白飯命!」を選んだときの表示が、なにもフリカケをしてない「白飯そのまま」な HTML です。ほかの表示は、この白飯にかけるフリカケを変化させてるだけです。別ページへ飛ばしているわけではありません。

CSS はフリカケですから、サイト全部のページにおなじフリカケをすることで、簡単に同じ味に仕立てることができます。だんだんその味に飽きてきたら、別のフリカケを用意すれば、これまた全ページの味があっさり変わります。

ウチもそうだけど、多くの CSS 採用 Web サイトは一種類のスタイル(味)しか用意してないですけど、やろうとおもったらこのページのように複数の味を用意して、訪問者の気に入った味を選んでもらうことも可能です。今はあまり無いけど、ゆくゆくは多くのブラウザがこの「スタイルシート選択機能」を自力で持つようになるでしょう。(現在は Mozilla(Netscape6)がこの機能をすでに持ってます)

さらに、ブラウザで表示するすべてのページに自分専用の味(ユーザースタイルシート)をふりかけることもできます。どこ行くにもマヨネーズを持ち歩いている感じっすね(笑)。このユーザースタイルシート機能はすでに Windows の IE4 以上、Mac の IE5 以上、Mozilla(Netscape6)が持ってます。ぼくも自分のマヨネーズをヒトサマのページにぶっかけて自分好みの味に仕立ててます。うひ。

CSS によるスタイル制御のお手軽さと柔軟さがこれでおわかりでしょーかー。

後編へつづきます


Copyright © 1998-2006 ALIMIKA SATOMI/NYAN-NYAN-HANTEN.Created: 2001/01/13, Last-modified: 2001/01/13