スタイルシートの基礎

スタイルシートとは

スタイルシートはhtml(文章)と、デザインを分けるために生み出された仕組みです。
スタイルシート(css)が誕生するまでは、文章の中に文字サイズや、色などを記述していました。

これだと文字サイズを全体的に小さく、大きくしたい場合等に、文章を全部直す必要がありました。
このままだと不便なので、文章は文章、デザインはデザインと別ける為にスタイルシートが誕生しました。

角が丸いウィンドウを作るためにテーブル(表)を使ったりと、html本来の用途とはかけ離れていました。

スタイルシートで色を指定

明るい色(hilight)は赤(#c00)、暗い色(dark)は灰色(#888)と指定。
.hilightの様にドットで始まるのはクラスセレクタ、#darkの様に#で始まるのはIDセレクタと言う。
色はRGB順のカラーコードで、3桁(#c00)でも、6桁でも(#cc0000)指定可能。

/* クラスセレクタ */
.hilight {
  color: #c00;
}

/* IDセレクタ */
#dark {
  color: #888;
}

段落(div)や、水平線(hr)にスタイルシートを適用する。
クラスセレクタの場合は、class=で指定し、IDセレクタなら、id=で指定する。
セレクタ名は、“や'で囲っても、囲わなくても良い。

<body>
  <div class=hilight>
    このテキストは明るい色です
  </div>
  <hr class=hilight></hr>

  <div id="dark">
    このテキストは暗い色です
  </div>
  <hr id='dark'></hr>
</body>

クラスセレクタととIDセレクタ

クラスと、IDはどのように使い別けるものなのでしょうか？
IDはページ内でユニーク(同じ名前がない)である必要があり、クラスは同名があっても構わない。
実はこれには明確な、使い分けの基準があります。

例えばページが左側に目次、右側に本文があったとします。
この場合、目次はID=index、本文はID=pageとすれば、以下の様に使い分けることが可能にになります。