divとclassについて知る【CSSの書き方入門】

実際にhtmlをCSSで装飾しながら、スタイルシートの扱い方を覚えていきましょう。
完成見本はこちらです。

divとclassについて知る

bodyに背景色が入りましたが、このままでは見にくいですよね。
画像や文字の部分はあまり広がりすぎないようにして、背景色は白にしたいです。

こんなときには<div>というタグを使用します。
HTMLタグは基本的に構造や役割を示しますが、そんな中で<div>タグは意味を持たない特殊なタグ。
検索エンジンなどの機械から見れば、あってもなくても良いタグです。

では<div>タグは何なのか、と言えば、主に「レイアウトや装飾のため」に使います。
divという透明な箱でコンテンツを囲って、CSSによるレイアウトや装飾をしやすくするのです。

divタグを使ってみましょう。
index.htmlの中身を全てdivタグで囲います。

<body>
  <div>
    <header>
    ～　略　～
    </footer>
  </div>
</body>

divで囲えているのか分からないので、cssを書いてみましょう。

body {
  background: gray;
}

div{
 background: white;
}

上書き保存して、ブラウザで再読み込みします。
灰色背景の中に、白背景のエリアが出来ました。

この白背景部分が、今回作った<div> ～ </div>です。
ヘッダーからフッターまでが１つのグループに入ったわけです。

ページデザインによっては<div>を大量に使用します。

今のようにdiv{ }でのスタイル指定だと、<div>タグ部分に全て一緒のCSSが適用されてしまいますよね。
特定の<div>にだけCSSを適用できるように、divに名前を付けます。

divタグに名前をつけるために、HTMLではidもしくはclass属性を使います。
idはページ内で同じ名前を１回しか使えないというルールがあるので、今回はclassの方を使いましょう。classは１回だけ使っても、何十回使っても良いです。

class名は自由に決めることができます。
今回は全体を包むdivなので、container(コンテナ)と命名しました。

containerという名前のdivにのみスタイルが適用されるように、CSSファイルの方も書き換えましょう。

containerの前に半角ピリオド（ . ）を付けます。
この半角ピリオドはclassを意味する記号です。

.container{
 background: white;
}

上書き保存しても、ブラウザでの表示が変わらなければうまくできています。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る