ホームページ作成　ウェブリッツ

cssとは、カスケーディング・スタイル・シートとも呼ばれる技術。

Webページのレイアウトを定義する規格です。
これまでは、WebページのレイアウトはHTMLのみを用いて記述されていて、
HTMLにはレイアウトに関する仕様が大量に取り込まれましたが、
これは文書の論理構造を記述するという本来のHTMLの目的に反するため、
文書の視覚的構造を規定する枠組みとして新たにCSSが策定された経緯があります。

HTMLのみでも装飾などは可能でしたが、HTML本来の目的に添わない事が
css策定の為の理由ですが、
ホームページ作成の面で見た場合、それぞれのタグに直接装飾するための要素を書かないといけなくなることで、ソースと呼ばれる、HTMLの記述が雑然としてしまい、醜く見えたり、
後々の管理の面でも、そのソースの読みにくさから、
管理作業が必要以上に大変になってしまうのに比べると、
cssという技術も覚えなければいけなくなった反面、
HTMLソースのスリム化や、管理のし易さがしやすくなり、
また、HTMLのみで装飾をしていた時に比べ、
以前よりも高度なデザインや、装飾が可能となった事が、
ホームページ作成面における、メリットとなりました。

cssを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を
文書本体(及び文書の論理構造を記述したHTML)から切り離すことができ、
ユーザが複数のレイアウトから適当なものを選択することができるようになりました。
このcssの技術については、HTMLを含めた、
WWW（ワールド・ワーイド・ウェブ。インターネットの技術の根幹）に関する標準化団体である、W3Cで標準化されています。

上記の文のように、HTMLとはずいぶん違う文法であることがわかります。

例を以下に示してみましょう。

p#fontcolor { color : #ffffff } の場合、

"p"というHTML要素（「段落」を示す要素）の中に、
"#fontcolor"を付ける事で、
「段落要素"p"に、fontcolorというセレクタ（名札みたいなもん）の場合」という意味になる。

そしてその後ろについている"{　　}"の囲みを宣言ブロックといい、
中にある「color : #ffffff」（文字色を:白にする）という命令文を書き込むことにより、

「HTMLタグの段落要素である"p"の、fontcolorと名札が付けられた場所に、
「color : #ffffff」を適用させなさい 」

という文章が完成します。
これがcssの基本の文法です。

ちなみに、HTMLタグの方は、

<ｐ id="fontcolor">ほにゃららん♪</p>

となっていないと、せっかく上で書いたcssが適用されません。

上では、cssを装飾目的に使うと書きましたが、

では、どのような適用のされ方をしているのか、下の画像を例にしてみます。

左の画像に比べて、右の画像はシンプルですね。

あまりに見かけが違いすぎですが、本当に全く同じHTML構造を持ったページです。

cssの説明として、
上にも記述した「フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を
文書本体から切り離すことができ」と言うように、

HTMLの構造はそのままに、表現のみをcssによって書くことが出来るのが、cssの大きな利点だといえます。

これにより、HTMLの構造はいじらずに、cssで装飾のみを変える事ができ、
同じページを、違う人がcssのみを書き換えることで、
まったく違うページが完成する事になって、おもしろい事になるんじゃないかと、
個人的には思います（笑