今までCSSを使って文字の色を変えてきましたが、本当はHTMLでも変えることができるんです。文字のデザインを変えるための要素にfont要素があります。これを使って、<font color="red">赤くしたい文字</font>とすると、「赤くしたい文字」の部分が赤くなります。「そんな簡単な方法があるなら先に教えてよ」と思った方もいるでしょう。でも、CSSの方がずっと便利なんです。
CSSの何がいいかって言うとデザインを一括指定できることです。em { color: red; }と書くだけで、<em>〜</em>で囲んだ部分がすべて赤くなります。青くしたいと思ったらem { color: blue; }に書き直すだけです。HTMLで色を変えていたら、タグを全部書き直さないといけません。これはとても大変です。
ほかにもうれしいことがあります。いろいろなデザインのCSSファイルをつくっておけば、それを今使っているものと入れ替えるだけで、サイトのデザインを変えることができます。
JavaScriptをOnにするとセレクトボックスが表示されるので、適用するテーマを選んでください。CSSでデザインすると、こんな風に一つのHTMLファイルにいろいろなデザインを当てはめて遊べます。(スクリプト配布元：Website Options)
他サイトのCSSを利用させてもらっています。
CSSのもう一つの利点は、細かいデザインが可能だということです。HTMLでできることといえば、文字サイズ・色・フォント・デザイン(太字・斜体)を変えるぐらいです。しかし、CSSならいろいろできるんです。なにがいろいろなのか文章では説明できないので、用意したサンプルを見てみてください。
以下のサンプルはHTML MANIAXサンプルソースをかなり参考にしてあります。
枠線です。単なる実線以外にも、二重線、点線、破線、浮き彫りなどいろいろなデザインがあります。太さも自由に調節できます。
CSSを使ったいろいろな見出しです。画像を使わなくても、枠線を利用するとこんなこともできます。
リンクにマウスを乗せると変化します。
どうですか？CSSってすごいと思いません？さまざまなオプションをうまく組み合わせれば、相当格好いいページがつくれます。みなさんのセンスで魅力的なページをつくってください。
これほど便利なCSSにも欠点があります。最大の欠点は、ブラウザにバグがあることです。最近のInternet ExplorerやFirefoxはわりあい正確に表示してくれますが、Netscape Navigator 4.xなど一昔前のブラウザだとまともに画面に表示されないことも多々ありました。
CSSはHTMLに比べると新しい機能で、しかも複雑なため、ブラウザがサポートしきれていないわけです。CSSを使うときはInternet Explorer、Mozilla、Firefox、Netscape、Operaなどいろいろなブラウザでちゃんと表示できるか確かめるようにしましょう。
次回からCSSを使って文字の周りをいじってみます。