Web Frontier

スタイルシートを使う事によるメリットは多大です。 例えば、複数ページの文書のフォントを一括で指定可能だったり、 p要素、つまり段落で表された部分の最初のインデントを１文字下げたり…など数えきれません。 今まで、段落の先頭を1文字開けるのに全角スペースを入れている人もいらっしゃるかも知れませんが、 この手法でそんな煩わしい事はしなくて済みます。

例えば、body要素には背景色を設定する「bgcolor」属性やテキスト色を指定する「text」属性があります。 これをすべてのページに打ち込んだとしましょう。そして、ふと背景色を変えたくなった…
こんな時どうしますか？1ページ1ページ手作業で背景色の部分のタグを変更するのは非常に面倒です。 最近ではファイルレベルで置換できるアプリケーションもありますから、それに任せれば良い！というかも知れませんが、 こういう時にやはりスタイルシートによる設定が有効です。

body { background-color: #cccccc; }

この一行を記述するだけでこのスタイルシートを参照しているすべてのページの背景色が自動的に切り替わります。 「このスタイルシートを参照している…」とは、HTML文書のhead内にlink要素でスタイルシートを参照するという事です。 「あっ、ちょっと背景色を変えたいな…」と思ったら、「#cccccc」の部分を好きな色に変えると、 このCSSを参照しているすべてのページの背景が切り替わります。まとめると次のようになります。

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

見栄えを一括で指定できる

いちいち、要素ひとつひとつにレイアウト用の属性を指定したりするのではなく、一括で変更できるのが最大のメリット。

見栄えと意味で分離可能

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

ユーザがスタイルシートを設定できる

ブラウザによっては自分の好きなスタイルシートファイルを適用することができます。 大きな字で読みたい人も（これは文字の大きさでもできますが…）、自分の好みのスタイルを適用することができます。

HTMLと分ければ文書容量が格段に小さくなる

HTMLで文書構造を作成し、CSSでレイアウトを行うようにすれば共通化でき、 ファイル容量も格段に縮小する事ができます。

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

未対応のブラウザがある

一昔前の「Netscape Navigator」などはスタイルシートをサポートしていません。 よって場合によってはかなりひどい崩れたページになってしまうかも知れませんので、 意味付けも去ることながらこういった古いブラウザへの配慮も重要だと思います

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

例えば、「margin」などでもそうなのですが、「Internet Explorer」と「Netscape Navigator」などでは計測方法が 異なります。

このように格段に管理が楽になる反面、 デメリットとしては先ほども言いましたがブラウザで特定スタイルシートに対応していないものがあると デザインが崩れてしまう事でしょうか。Internet ExplorerとMozilla系のブラウザでは見え方が違いますので、 両者でデザインを見比べる必要性があるでしょう。また、今となっては使っている人はゼロに近いですが、 Netscape4.7などではスタイルシートに正式に対応しておりませんので、デザインが崩れてしまいます。

どのCSSがブラウザでどのような挙動を示すか？をしっかり覚えていなければ、 スタイルシートを完全に使いこなす事は難しいかも知れません。