CSSを使うメリット

危機感からうまれたCSS
最近はCSSという言葉を目にすることが多くなってきたと思います。

そのCSS（Cascading Style Sheet）は、どんどん複雑になっていくHTMLコードのために、 開発者同士でもコードを理解しあうことが難しくなってきた危機感からうまれたもののようです。 なぜコードが理解しあえないと危機感が生じるかというと、情報が共有できず、技術的進歩が止まってしまうからです。

そこで世界的な動き（W3C）の中からCSSがうまれ、導入を奨励されるようになりました。

CSSを簡単にいうと、htmlコードを「コンテンツ(内容）」部分と「デザイン」部分を別々にした、 その「デザイン」部分ということになります。そのメリットは・・・

■  htmlの分離
「コンテンツ(内容）」部分と「デザイン」部分を分離したことで、HTMLコードはきれいで読みやすいものになりました。
■  デザインの自由
CSSはHTMLコードでつくるよりも細かい指定ができるので、サイトの見た目の表現の自由度がましました。
■  作業も分担できる
「コンテンツ(内容）」部分をつくる人と、「デザイン」部分をつくる人の作業の分担が可能になり それぞれの得意分野を生かせるようになりました。

個人サイトにとってのCSS
■  SEO対策になる
HTMLコードがきれいで読みやすいものになることで、検索エンジンと相性のよいサイトになります。
■  デザイン変更が楽になる
ひととおりサイトが完成すれば、文字サイズ・色あい・レイアウトなどを変更する場合 なんページにわたる修正でも、CSSの一部分の修正だけでできるので、ぐっと楽になります。
■  イメージ通りのデザイン
HTMLだけではできない、自分が考えるイメージどおりのデザインがほぼできるはずです。

いいことずくめのCSSですから導入はオススメです。HTMLがある程度つかえる方には、CSSを導入するのは難しくはないと思います。 またウェブだけでなく、ブログでも使えるツールです。

ちなみに管理人は２年前に、CSSを知ってから以降は、極力CSSを使っています。 プログラムの構造化と同じ方向だから、今後この方向にすすむと考えて極力CSSを使うくせをつけるようにしてきました。 CSSはワープロソフトで直接コードを扱っています。

CSSでできることの例
■  文字サイズ・間隔・行間などの例
文字ザイズ・間隔・行間などのができますが、ここでは文字サイズの例です。

文字サイズ・間隔・行間

文字サイズ・間隔・行間

文字サイズ・間隔・行間

■  レイアウトの変更の例
A-1をCSSの少しの修正で、Aー2やA-3に簡単にレイアウトの変更ができてしまいます。

A-1　当初のレイアウト

ヘッド
Side	Main
フッタ

A-2　Sideの位置を変更・・・「float」タグ部分の変更

ヘッド
Main	Side
フッタ

A-3　全体の巾をひろげたレイアウト・・・「width」タグ部分の変更

ヘッド
Side	Main
フッタ

気をつけてほしい点
■  今のサイトはどうする
一度の全部をCSSにしなくても、今のサイトのままでもできるところから直していけます。 ちなみに置換ツールを使うと直しやすいと思います。

■  サーバーは大丈夫？
CSSの導入は問題ないはずです。万が一問題があるならはやくそのサーバーはやめて、他のサーバーをレンタルしてください。

■  CSSを詳しく解説しているサイトと本
CSSを解説
CSSを解説
CSSを解説