スタイルシート(CSS)の種類

ここではCSS（スタイルシート）の基本的な書き方について説明します。

「」では、BODY要素に対してスタイルシートを適用する例を書きましたが、 もちろん他の要素とも組み合わせることができます。 例えばH1要素の文字色を赤くして、その部分の背景を黒くしたいのなら、 

h1 {
	color: red;
	background-color: black;
}

とCSSファイルに書けば、すべてのH1要素の文字色が赤くなって、背景が黒くなります。

「h1」は、組み合わせる要素の名前を指しているということは分かると思います。 そして次に半角の「{」「}」（中カッコ）を書いて、その中に中身を書きます。

中に入っている「color」や、「background-color」の部分を「プロパティ」といいます。

プロパティはHTMLの要素などと同じく、文字や背景の色を変えるものから、間隔を空けるもの、枠線をつけるものなど 何種類もあります。

「red」や「black」はそれぞれのプロパティの「値」です。

プロパティと値は「：」で区切り、プロパティ同士は「；」で区切ります。 

h1{color:red;background-color:black;}
と書いても同じことですが、これでは見づらいので、 プロパティごとに改行して、半角スペースやタブで適当な間隔を取るようにしましょう。

で出した、CSSファイルではなく、HTMLのタグに直接書き込む方法を使って説明します。

あんまり説明ばっかりだと混乱してくると思いますので、ここでおさらいを。

早い話が、HTMLのタグでは

<body bgcolor="black" text="white">

と書いていたのが、CSSファイルでは、

body {
	background-color: black;
	color: white;
}

と書かなければいけないということです。

CSSファイルを使わず、HTMLタグにstyle属性を使って直接書く方法だと、 
<body style="background-color: black; color: white;">

です。（タグの中ですので改行はできません。）

HTMLとCSS（スタイルシート）の違い、わかりましたか？

それでもいまいちピンと来ない方は、実際にこのサイトで使っているCSSファイルを開いてみてください。

上で説明した書き方で書かれているのが分かると思います。

HOME