スタイルシート

Style.css

スタイルシートとは?

スタイルシートとは、WEBページ上の「見栄え」を定義するための新しく開発された技術です。HTML は本来文書の意味だけを定義するべきで、文書の見栄えは定義するべきではない。見栄えは HTML ではなく、スタイルシートで記述しよう」というのが開発の理由です。

HTML の標準化を進める W3C が 1996年12月に CSS1(Cascading Style Sheets, Level 1)を勧告し、IE(Internet Explorer)3.0 と Netscape Communicator 4.0 がこれの一部機能を(中途半端に)サポートしました。また、両者はこのスタイルシートとJavaScriptなどを組み合わせ、ダイナミックHTMLという技術にまとめ、公開しています。

スタイルシートのメリット

スタイルシートを使用するメリットには次のようなものがあります。

♦見栄えを一度に指定できる

すべての H1要素に <font color=green>~</font> を指定してまわるよりも、スタイルシートで一度に指定した方が楽になります。外部ファイルで指定しておけば、より一層楽になります。

♦見栄えを一度に変更できる

見栄えを外部ファイルに定義しておけば、それちょっと変更するだけで見栄えを一度に変更することができます。夏には夏のスタイルを、冬には冬のスタイルを適用してやることもできます。この時、class=red のようなクラス名だと、.red { color:blue; } などと変更した時に妙な気分になるので、class=pastoral のような、見栄えに影響しない名前をつけておくとよいそうです。

♦自分の好きな見栄えに変更できる

IEでは、[インターネットオプション] → [ユーザ補助] → [ユーザースタイルシート] で、人のページに自分の好きなスタイルシートファイルを適用することができます。黒地に白文字が好きな人や、大きな字で読みたい人も、自分の好みのスタイルを適用することができます。

♦見栄えと意味を分離できる

Webページを自動収集して情報データベースを作成したり、目の見えない人が音声ブラウザでWebページを読む場合など、見栄えがあまり重要視されないケースもあります。見栄えを別のページで記述することにより、不要な見栄え情報を読み込んでくる煩わしさを解消することができます。

スタイルシートの注意点

上記のように、使いこなすと便利なスタイルシートですが、いろいろ問題もあります。

♦未対応のブラウザもある

今でもまだ、スタイルシートに対応していないブラウザが残っています。また、いろいろな理由からスタイルシート機能をオフにしている人もいます。意味だけでなく、見栄えも大切にするページであれば、古いブラウザへの配慮も必要です。

♦ブラウザによって動作が異なる

IE と Netscape で動作が異なります。同じブラウザでもバージョンやWindows版とMacintosh版でも動作や見栄えが異なります。

♦ひどい実装のブラウザが多い

IE4.0やIE5.0で確認しながら、スタイルシートを駆使したページを IE3.0 や Netscape 4.0 で見ると、大半の人が愕然とするでしょう。IE3.0 や Netscape 4.0 にはスタイルシートに関する大量のバグがあるので、ひどい時は文章と文章が重なってしまって、読むことすらできなくなります。

♦保存すると見栄えが···

ページを自分のハードディスクに保存して、後から見る人も多いと思いますが、スタイルシートの外部ファイルの保存を忘れてしまうと、せっかくの見栄えが台無し(読みづらいページ)になってしまうことがあります。