ＣＳＳ（スタイルシート）って何？

ＣＳＳとは、ＨＴＭＬからデザイン部分を切り離して定義するプロパティの集まりのこと。

簡単に言うと、ＣＳＳとはホームページをデザインするための言語で、ＣＳＳを使ってホームページをデザインすれば、①デザインの自由度が広がる。②複数のページを作成する際に、何度もデザイン部分を作り直さなくても済む。②ＳＥＯ（検索エンジン最適化）に良い。といったメリットがあります。

前置きは短めにして、さっそく中身を見ていきましょう。

これはＨＴＭＬだけで記述したおなじみの段落です。これをブラウザで表示すると、

テスト

こうなります。これをＣＳＳを使って文字の色と大きさを変えてみましょう。

p{
　 font-size:150%; /*pタグで囲まれた文字の大きさを150%に指定する。*/
　 color:#FF0000; /*pタグで囲まれた文字色を赤にする。*/
}

テスト

こうなります。#FF0000はカラーコードと言って、文字は赤であることを１６進数を使ってコンピューターに指示しています。
今度はＣＳＳを使って文字の背景色を変えてみましょう。

p{
　 background-color:#cc99ff; /*h1タグの背景色を紫にする*/
}

テスト

文字の背景に壁紙などの画像を使うことも出来ます。

p{
　 background-image:url(re.gif); /*re.gifという画像を文字の背景に使うf*/
}

テスト

ここまではｐタグで囲んだ文字はすべてＣＳＳで指定したとおりのレイアウトに変更するための書式ですが、
あるｐタグで囲んだ文字色は赤、あるｐタグで囲んだ文字色は青といった具合に、ｐタグごとにレイアウトを変更したい場合は、次のように指定します。

ｐタグの中に、class='クラス名'を使って、場合分けします。クラス名は半角英数字であれば何でも良いです。ＣＳＳは次のとおり。

p.a1{
　color:#ff0000; /* a1というクラス名のｐタグで囲んだ文字は赤に指定。
}
p.a2{
　color:#3300cc; /* a2というクラス名のｐタグで囲んだ文字は青に指定。
}

これをブラウザで表示すると、

テスト１

テスト２

次は、テーブルをＣＳＳで装飾してみましょう。
まずは、ＨＴＭＬだけで、テーブルを作ってみます。

これをブラウザで表示すると

テーブル１	テーブル2
テーブル3	テーブル4

これをＣＳＳで装飾してみましょう。ＨＴＭＬは次のとおりです。

ＣＳＳは次のように記述します。

td.a1{
　 border:1px solid #000000; /*a1というクラス名のｔｄタグで囲んだ部分の外郭線は、黒の直線で太さを１ｐｘに*/
　 background-color:#0033ff; /*a1というクラス名のｔｄタグで囲んだ部分の背景色を青で*/
}
td.a2{
　 border:1px dashed #000000; /*a2というクラス名のｔｄタグで囲んだ部分の外郭線は、黒の破線で太さを１ｐｘに*/
　 background-color:#ff0000; /*a2というクラス名のｔｄタグで囲んだ部分の背景色を赤で*/
}
td.a3{
　 border:1px solid #aaaaaa; /*a3というクラス名のｔｄタグで囲んだ部分の外郭線は、グレーの直線で太さを１ｐｘに*/
　 background-image:url(re.gif); /*a3というクラス名のｔｄタグで囲んだ部分の背景にre.gif画像を使う*/
}
td.a4{
　 border:3px solid #000000; /*a41というクラス名のｔｄタグで囲んだ部分の外郭線は、黒の直線で太さを3ｐｘに*/
　 background-color:#ffff66; /*a4というクラス名のｔｄタグで囲んだ部分の背景色を黄で*/
}

テーブル１	テーブル2
テーブル3	テーブル4