実践してみよう!~HTMLに組み込む

定義したスタイルをHTMLから呼び出せるようにする

定義したCSSをHTMLから使用できるようにするには、まずHTMLに組み込んでHTMLからスタイルを呼び出せるようにする必要があります。その宣言を行う場所は<head>から</head>の間で行います。ひとつはスタイル定義を直接書く方法で
<style type="text/css"> ここにスタイルを定義 </style>
と書くことができます。もうひとつは別のCSS専用ファイルにスタイルを定義しておき、同様にhead間で
<link rel="stylesheet" href="ファイル名.css" type="text/css" />
とファイルから読み込むようにすることです。一般的に、ホームページのデザインは統一されていたほうが見栄えが良いため、後者の方法でひとつのCSSファイルを複数のHTMLファイル内で読み込むのが推奨されています。この方法ならデザインの統一だけでなく、CSSファイルを修正して定義内容を一括でHTML全体に反映させることができます。

スタイルを実際に使ってみる

定義したスタイルは、定義した方法とHTMLへの埋め込み方で色々な使い方ができます。例えば
p { color : red }
.red { color : red }
と二つの定義があったとします。pの方は要素に対して直接定義しているため、HTML内でpタグを使っている部分は全て赤い文字色となります。
.redの方はクラスと呼ばれ、頭にピリオドを置くことで好きな名称をつけることができます。
この場合は<p class="red">赤い文字になります</p>とタグのところでクラス使用を明示することで反映されます。さらに高度な使い分けとして、スタイル定義のid部分をp.redとすることでredはpタグの中でしか使えないようになります。つまりdiv.redなど異なるタグに同じ名前の定義を作れるようになります。逆に言えばタグをつけていない.redはあらゆるタグに使える自由なクラスということを表します。この定義を工夫すればスタイルの定義と使用が効率的に書けるようになるので頑張ってください。