IDとクラス
CSSは、多くの場合はIDやクラスを使ってスタイルを定義します。
本ページでは、IDとクラスについて説明しています。
ID
IDは、HTML文書内で要素を特定するために使われます。
例えば、リンクをクリックすると指定のページに移動しますが、IDを使うとページの途中までジャンプして表示させることができます。
以下のHTMLが、ファイル名page.htmlであったとします。
<link rel="stylesheet" href="css/style.css">
<body>
<h1>「キャンプ入門サイト」</h1>
<div>
<li>テント</li>
<li>寝袋</li>
</div>
・・・画面が埋まるほど記述する・・・
<p id="id-test">1.キャンプで用意するもの</p>
<p>2.着いてすぐに行う事</p>
<p>3.後片付け</p>
・・・画面が埋まるほど記述する・・・
</body>
赤字部分で、IDをid-testとしています。
もし、他のページで<a href="page.html#id-test">テスト</a>と記述していたとします。page.html部分は、移動先のページです。#以降はIDを示すため、リンクをクリックすると上記HTMLの赤字部分までジャンプして表示されます。
「画面が埋まるほど記述する」と記載していますが、ディスプレイ一杯に表示される以上の文書がないとジャンプしても気づかなため、テストなどする時は適当な文書で埋めてください。
このIDは、CSSのセレクタでも使えます。
#id-test {
color: red;
}
上記により、HTMLのid="id-test"で記述した要素(上記HTMLの例では「1.キャンプで用意するもの」)の文字が赤色になります。
IDは、わかりやすいように自分で名前を付けれますが、HTMLのページ内で唯一の要素を示すため、同じ名前のIDは使えません。同じ名前でなければ、複数箇所でIDは使えます。
クラス
クラスは、HTML文書内で複数の要素へ働きかけするために使えます。
以下のHTMLがあったとします。
<link rel="stylesheet" href="css/style.css"> <body> <h1 class="class-test">テント</h1> <p>テントについて</p> <h1 class="class-test">寝袋</h1> <p>寝袋について</p> </body>
赤字部分で、クラスをclass-testとしています。
このクラスは、CSSのセレクタで使えます。
.class-test {
color: red;
}
上記により、HTMLのclass="class-test"で記述した部分(上記HTMLの例では2箇所のh1要素)の文字が赤色になります。
クラスは、わかりやすいように自分で名前を付けれます。また、複数の要素へ働きかけできるため、同じHTMLファイル内で同じ名前のクラスが複数箇所で使えます。また、名前が異なる複数のクラスも使えます。
セレクタでの扱い
セレクタは、h1などの要素を指定することができることは、「ルールセット」で説明しました。また、すでに説明したとおりIDやクラスも指定できます。これをIDセレクタ、クラスセレクタと言います。以下は、まとめです。
| セレクタ種類 | 記述例 | 説明 |
|---|---|---|
| 要素型セレクタ | h1 | 指定した要素全般が対象です。対象例：<h1> |
| IDセレクタ | #id-test | HTMLでid指定した要素が対象です。対象例：<div id="id-test"> |
| クラスセレクタ | .class-test | HTMLでクラス指定した要素が対象です。対象例：<div class="class-test"> |
IDセレクタは#(シャープ)、クラスセレクタは.(ドット)を付けて記述します。
また、<h1 id="id-test">と記述した場合、h1の要素型セレクタに記述した宣言と、id-testのIDセレクタに記述した宣言の両方が有効になります。<h1 id="id-test" class="class-test">と記述した場合、要素型セレクタ、IDセレクタ、クラスセレクタすべての宣言が有効になります。
優先度
宣言中のプロパティが重複していた場合、以下の順で優先度が高くなります。
ID > クラス > 要素型
つまり、IDセレクタでcolor:red;、クラスセレクタでcolor:blue;、要素型セレクタでcolor:black;と宣言した場合、色は赤になります。
また、1つの要素に対して複数のクラスを適用することもできます。以下は、例です。
<h1 class="test1 test2">
上記では、test1とtest2のクラスを適用しています。クラスとクラスの間には、スペースが必要です。2つのクラスで同じプロパティがあった時は、CSSで後に記述したクラスの宣言が有効になります。つまり、上記のtest1、test2の書き順は関係ないという点は、留意が必要です。
IDとクラスの使い分け
IDは、HTML内で同じ名前を1回しか使えません。このため、ページのフォーマットを整える時にIDを使うことが多くあります。以下は、例です。
<div id="id-test"> <div> <p>1.本文を記述</p> <p>2.本文を記述</p> </div> <div> <p>サイドバー1</p> <p>サイドバー2</p> </div> </div>
上記は、赤字部分でdiv要素にIDを適用しています。IDセレクタでdisplay:flex;と宣言すればフレックスコンテナになるため、以降の2つのdiv要素はフレックスアイテムとなり、横に並べて表示されます。この方法は、メイン記事とサイドバーを左右に表示するときなどによく使われます。
これは、クラスでも可能なので、クラスだけ使って作成するやり方もあります。同じクラス名を、HTML内で1箇所しか使わなうということもできるためです。しかし、リンク先としても使う場合は、クラスではなくIDが必須です。
クラスは何度も使えるため、繰り返し使うものはすべて同じ色にしたり、画像をセンタリングしたりするなど、複数箇所で同じスタイルを適用したい場合に使います。
ホームページ作成「CSS/スタイルシートの基本」