====== スタイルシートの基礎 ====== ===== スタイルシートとは ===== スタイルシートは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=で指定する。\\ セレクタ名は、"や'で囲っても、囲わなくても良い。

このテキストは明るい色です

このテキストは暗い色です

===== クラスセレクタととIDセレクタ ===== クラスと、IDはどのように使い別けるものなのでしょうか？\\ IDはページ内でユニーク(同じ名前がない)である必要があり、クラスは同名があっても構わない。\\ 実はこれには明確な、使い分けの基準があります。\\ \\ 例えばページが左側に目次、右側に本文があったとします。\\ この場合、目次はID=index、本文はID=pageとすれば、以下の様に使い分けることが可能にになります。\\