スタイルシートとCSS

本屋さんやインターネットでホームページの作り方について探していると、『HTML＋CSS』だとか、『HTMLとスタイルシート』などと、HTMLとスタイルシート(CSS)がセットになっているのをよく見かけると思います。

実は、たいていのホームページはHTMLで基本的なレイアウトを決めておいて、スタイルシート(CSS)でそのレイアウトをさらに細かく調整して作られています。また、スタイルシートを外部ファイルとして管理すれば一度に複数のページの更新や修正ができ、メンテナンス面でもとても効率的です。

スタイルシートにはホントは色々な種類があるのですが、HPの世界では一般的に「CSS(Cascading Style Sheet)」をスタイルシートと言い、このHPでもスタイルシート＝CSSとして話を進めていきます。

CSSの基本的な書き方

それでは基本的なCSSの書き方について説明しておきます。スタイルシートは基本的にタグ（セレクタ）に対して使用するようになっています。
CSSはセレクタ名の後ろにスタイルの内容を記述して設定します。

セレクタ　{　プロパティ：値　}

※セレクタ：スタイルを適用させる要素(HTMLタグ)
※プロパティ：適用させるスタイルの種類
※値：スタイルの値

実際に記入するとこうなります。

【記入例】

p{ font-size: 16px; color:#ff0000 }

※ｐタグは段落を意味するタグです。
ここでは<ｐ>タグで囲まれた部分に対してフォントサイズ(文字の大きさ)を16ピクセルに、文字の色を赤色(ff0000)に設定しています。

ここで注意するのは、スタイルとスタイルの間を「;」で区切ってあげるのを忘れないということです。これを忘れるとスタイルシートが適用されないので注意してくださいね。