実際にhtmlをCSSで装飾しながら、スタイルシートの扱い方を覚えていきましょう。 完成見本はこちらです。
div要素（divタグ）とは
bodyに背景色が入りましたが、このままでは見にくいですよね。 画像や文字の部分はあまり広がりすぎないようにして、背景色は白にしたいです。
こんなときには<div>というタグを使用します。
HTMLタグは基本的に構造や役割を示しますが、そんな中で<div>タグは意味を持たない特殊なタグ。
検索エンジンなどの機械から見れば、あってもなくても良いタグです。
では<div>タグは何なのか、と言えば、主に「レイアウトや装飾のため」に使います。
divという透明な箱でコンテンツを囲って、CSSによるレイアウトや装飾をしやすくするのです。
divタグで囲ってみよう
divタグを使ってみましょう。 index.htmlの中身を全てdivタグで囲います。
<body>
<div>
<header>
～ 略 ～
</footer>
</div>
</body>
divで囲えているのか分からないので、cssを書いてみましょう。
body {
background: gray;
}
div{
background: white;
}
上書き保存して、ブラウザで再読み込みします。 灰色背景の中に、白背景のエリアが出来ました。
この白背景部分が、今回作った<div> ～ </div>です。
ヘッダーからフッターまでが１つのグループに入ったわけです。
class（クラス）とは
class属性で要素に名前をつける
ページデザインによっては<div>を大量に使用します。
今のようにdiv{ }でのスタイル指定だと、<div>タグ部分に全て一緒のCSSが適用されてしまいますよね。
特定の<div>にだけCSSを適用できるように、divに名前を付けます。
divタグに名前をつけるために、HTMLではidもしくはclass属性を使います。
idはページ内で同じ名前を１回しか使えないというルールがあるので、今回はclassの方を使いましょう。 classは１回だけ使っても、何十回使っても良いです。
class=" "て設定した名称をクラス名、もしくはCSSクラス名と呼びます。
クラス名はコードを書く人が、自由に決めることができます。
今回は全体を包むdivなので、container(コンテナ)と命名しました。
クラス名を使ってスタイル指定を書く
containerという名前のdivにのみスタイルが適用されるように、CSSファイルの方も書き換えましょう。
containerの前に半角ピリオド（ . ）を付けます。 この半角ピリオドはclassを意味する記号です。
.container{
background: white;
}
上書き保存しても、ブラウザでの表示が変わらなければうまくできています。