スタイルシート概論

いよいよスタイルシート（CSS）に関する話を始めます。
最初は難しく感じるかも知れないけど、慣れるまでの辛抱です。
スタイルシートの持つ可能性を最大限に活かせるようにがんばりましょう。

---

スタイルシートとは？

スタイルシート（CSS）は、HTML文章から不要なテーブルタグや、透過gif画像を取り除くための ひとつの解決策として、開発された言語です。

CSSの大きな目的は、ページをコンテンツ（情報）とデザインを分割して管理することにあります。
コンテンツはHTMLで論理的に書き、デザインはCSSで一括管理しようということです。

いままではHTMLファイルひとつで1ページを構成していたけど、
これからはHTMLファイル＋CSSファイルで1ページを構成していくことになります。
（スタイルシートを外部ファイルで作った場合）

まずはスタイルシートはデザイン（見栄え）に大きくかかわっていることを覚えてください。
ためしにスタイルシートを使ったページと使わないページを見比べてみましょう。
サンプルはうちのサイトの公開前のトップページです。

CSSを使わない場合　CSSを使った場合

両者の違いはスタイルシートを使った・使わないだけです。
HTMLソースはスタイルシート関連を削除した以外は全く同じです。
スタイルシートの力をなんとなくでも感じてもらえたでしょうか？

スタイルシートでできること

では具体的にはどんなことがCSSでできるのでしょうか？
以下はCSSによって自由自在に変更できることの一例です。

背景画像の表示位置、表示方法、背景色　etc
テキストの文字サイズ、行間、色、インデント etc
枠線の色、太さ、表示パターン
余白はマージン、パディングがピクセル単位で指定可能
要素の表示位置、表示方法
リンクの色
などなど、ありとあらゆることが非常に細かく調整できます。
これらを駆使すれば画像なしでも十分見栄えのするページをつくることが可能です。

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

スタイルシートを使うと次のようなメリットがあります。

高度なデザインが可能

文字の大きさや行間、表示位置を非常に細かく設定できるだけでなく、
重ね合わせなども表現できます。

デザインの使い回しが可能

同じようなページデザインならばスタイルシートを1つ作れば流用が可能です。
例えば、うちのサイトのサブページは全てstyle-sub.cssというスタイルシートを使用しています。
これにより、ファイルのサイズが小さくなるし、 ページの配色などを変えたいときもスタイルシートをいじるだけで 全てのページに反映させることができます。

文章の差し替えが楽

デザイン的な更新が楽になるばかりでなく、無駄なタグがHTMLファイルから消えるので、
文章の差し替えたい部分を見つけるのが楽になります。

SEO（サーチエンジン最適化）対策

スタイルシートを有効活用しようとすると、自然ときれいなHTML文章になります。
そのため、検索ロボットがページの内容を解析しやすくなり、 より高い順位を目指すことができます。

---

今回はスタイルシートがどのようなもので、どんなメリットがあるのかを書きました。
いいとこだらけのようにも見えますが、欠点もあります。
それはブラウザーによって見え方が違うことです。
スタイルシートを使っていく中で必ず「なぜ？」と思う瞬間が出てきます。
いくらがんばってもどうにもならない時もあります。
そんな時は一番普及しているIEできれいに見えるようにして、
その他のブラウザーでは閲覧に支障が無い程度にすればいいと思います。
不満がある人もいるかも知れませんが、私はそういうスタンスでやっています。
スタイルシートを使うときはある程度妥協が必要なことを覚えておいたほうがいいでしょう。

---