解説
「CSS」は「Cascading Style Sheets」の略です。「Cascade」は、元々 連なった小さな滝のことで、そこから派生して数珠つなぎになったものを意味する言葉です。「Style Sheets」は、表示や印刷の書式を指定したファイルのことを指します。「CSS」では、複数の見た目の設定を数珠つなぎにして、見た目を表現することができます。
CSSは元々、HTMLの文書構造と見た目の定義を分けるために生まれました。CSSは、「<div style="color: red;">」のように、HTMLのタグ中に「style」属性を指定して、直接記入することもできます。また、「head」タグ配下に「style」タグを用意して、その中で書くこともできます。
文書構造と見た目を分けるという意味では、別ファイルに記述して読み込むのがよいでしょう。その際は、「<link rel="stylesheet" type="text/css" href="main.css" />」のように「link」タグを「head」タグ配下に書いて、ファイル（ここでは main.css）を読み込みます。
以下、CSSの記述の例と、その意味を抜き出したものを掲載します。「/* ～ */」と書くことでコメントを挿入することもできます。
記述例
#id {
background-color: blue; /* 背景は青 */
color: red; /* 文字色は赤 */
}
意味を抜き出したもの
セレクタ {
プロパティ: 値;
プロパティ: 値;
}
プロパティと値は「:」（コロン）で区切り、そのセットは「;」（セミコロン）で区切ります。
セレクタは、タグ名やID、クラス、階層構造の指定など、様々な方法で要素を指定できます。
セレクタの例
div タグ #id #ID .class .クラス div a 階層構造
サンプル
「CSS」を表示するサンプルです。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。
index.html
<html>
<head>
<title>「CSS」のサンプル</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<h1>「CSS」のサンプル</h1>
<div id="main">
<p>鼠は小さい。</p>
<p>猫は中ぐらい。</p>
<p>犬は大きい。</p>
</div>
<div class="sub">
<p>各動物の紹介。</p>
</div>
</body>
</html>
main.css
h1 {
color: #46a;
margin: 0.2em 0;
}
#main {
border: solid 2px #aaa;
padding: 0.2em 1em;
border-radius: 0.5em;
}
#main p {
border-bottom: solid 1px #ccc;
}
.sub {
background: #666;
color: #fff;
padding: 0.5em 1em;
margin-top: 0.5em;
border-radius: 0.5em;
}
.sub p {
margin: 0;
}
