CSS講座
タイプセレクタによる指定法＆用語説明
前のページのサンプル３を、もう一度書きます。
body {
background-color: gray;
}
p {
font-weight: bold;
font-size: 200%;
color: white;
}
この例で、bodyやpのことをタイプセレクタと呼びます。
background-colorなど、:（コロン）までの部分をプロパティと呼びます。
コロンから後の;（セミコロン）までの部分を値と呼びます。
・・・面倒くさいですね。なので、「bodyタグに 背景色:gray のスタイルを適用する。」とか、「bodyにbackground-colorプロパティを指定する。色はgray。」のように読んでしまえばよいでしょう。
ちゃんとした読み方なんかより、まずは使い方を理解しなければ何も出来ませんし。
class属性とid属性
タグには、共通属性として、classとidという属性を指定できましたよね。これらの属性について、HTML講座の方では詳しい説明はしてきませんでした。
class属性は、タグの所属するグループを示すものだと思ってください。id属性というのは、タグに固有のID（固有の識別名）を付けるものだと思ってください。
１つのHTML文章内に、同一の値を持つ属性を複数指定することが出来るのはclass属性です。
１つのHTML文章内に、同一の値を持つ属性を指定することが出来ないのが、id属性です。
classとidの使い方（HTML）
classとidの基本的な使い方は同じです。
"（ダブルクォーテーション）の間には、自分の好きな名前を指定することができます。使える文字は、半角英数（a-z、0-9）とハイフン（ - ）です。ただし、属性値の開始は半角英字のみです。数字とハイフンは使えません。
基本的な使い方（サンプル１）
<p class="red">赤い文字で表示されます。</p>
<p id="blue">青い文字で表示されます。</p>
class属性とid属性を同時に指定することも出来ます。（サンプル２）
<p class="red" id="red-1">class（red）とid（red-1）を指定</p>
<p class="red" id="red-2">class（red）とid（red-2）を指定</p>
また、class属性は、複数のクラスを指定することが出来ます。複数指定する場合は、半角スペースで区切って指定します。（サンプル３）
<p class="white bg-black">class（white）と（bg-black）を指定</p>
HTML側の使い方は、以上のことが分かっていればＯＫでしょう。
classとidの使い方（CSS）
次は、HTMLで指定したclassやidを、どのようにCSSで利用するのか解説します。
上のサンプル１に対応するCSSを書いてみましょう。
.red { color: red; }
#blue { color: blue; }
赤い文字で表示されます。
青い文字で表示されます。
上のCSSを見てもらえば分かるとおり、classごとにスタイルを指定するには、クラス名に. （ピリオド）を付けて指定します。これをclassセレクタと呼びます。
特定のIDを持つ要素にスタイルを指定するには、ID名に# （シャープ）を付けて指定します。これをidセレクタと呼びます。
ちなみに、クラス名はredですが、別に.red { color: green; }のように指定してもらっても構いません。当然、緑色の文字で表示されます。
では、サンプル２の方も適当にCSSを書いてみましょう。私は、下のように書いてみました。
.red { color: red; }
#red-1 { backgroud-color: #gray; }
#red-2 { font-style: italic; }
class（red）とid（red-1）を指定
class（red）とid（red-2）を指定
同様にして、サンプル３のCSSはこんな感じになります。
.white { color: white; }
.bg-black { background-color: black; }
class（white）と（bg-black）を指定
以上がclassとidの使い方です。（id属性は、ページ内の位置指定リンクを作成する際にも利用されます。）
