DreamWeaverCS3（ドリームウィーバーCS3）サイト制作

スタイルシート（CSS）とはホームページのデザイン性を高めると同時にSEOにも良いといわれています。 HTMLファイルとCSSファイルにわけて、デザイン面はＣＳＳ，テキストや画像などはhtmlファイルといったように分けます。 デザインを別ファイルにする事で、HTMLファイルは無駄のないスッキリした構成になります。
ＣＳＳの利点にデザインの統一性や、修正作業の簡素化があります。 ホームページでは統一性のあるデザインを多用する事が多いのですが、HTMLファイルに毎回タグでデザインを指定していたら膨大な労力と手間がかかります。その点、CSSファイルに分けてる場合はCSSファイルへの記述だけで各ページのデザインに使用できます。 修正も各ページを修正することなく、CSSファイルへの修正だけで済むので大変便利です。

スタイルシートをHTMLにリンクさせる事でスタイルシートのデザインがHTMLファイルに反映されます。 HTMLファイルに直接スタイルシートを記述する事もできますが、ここではCSSファイルに分ける方法を説明します。 その方がスタイルシートの利点を充分に活かせるからです。
その利点とは、
●HTMLファイルへの記述を減らす事でHTMLファイルのサイズを軽くできる。
●複数のHTMLファイルに大量に記述する手間を省く。
●デザイン変更時の手間を省く
●HTMLファイルの記述をシンプルに出来る事でSEO対策に効果的である
などがあげられます。
CSSをリンクさせるには、HTMLファイルのヘッド部分にリンクの記述をします。

【例】 <link href="art.css" rel="stylesheet" type="text/css" />

この例を解説すると「art.css」というCSSファイルをこのHTMLファイルにリンクさせてるという意味です。 この記述がないと、デザインが反映されません。（当然ですが・・。）

HTMLタグの記述にルールがあるようにCSSへの記述にもルールがあります。 CSSの記述は、セレクタ・プロパティ・値を記述します。 まず、セレクタを記述し、その後にプロパティと値を記述します。

【例】
h1{color:#000000;}

この例は、h1タグを黒色に変えるCSSです。 この場合、h1タグが「セレクタ」、colorがプロパティ、#CC0000が値となります。 プロパティと値は{と}で囲まなければいけません。そしてプロパティと値の間に:を入れます。 値の最後に;をつけます。
実際には【例２】のように複数の命令（プロパティと値）を記述する事が多いです。

【例２】
h1{ color:#000000; font-size:12px; text-align:center; }

このように複数の記述をします。 この例では、h1の色を黒に、大きさを１２ピクセルにして中央揃えにしています。