SukeBlog

プログラマーSukeによるブログ

【HTML/CSS】No.4 idとclass

【HTML/CSS】No.4 idとclass
この記事は約7分で読めます

idとclassについて

例えば、下記のようにspanタグでも赤い部分と青い部分を作りたいとします。
こっちは赤そっちは青

そんなときには、HTMLのタグにidやclassの値を設定します。

id

HTMLファイル内でユニークとなるような値を設定できます。
※ユニーク: 他と値が重複しないこと。一意とも言う。
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<span id="color_red">こっちは赤</span>、<span id="color_blue">そっちは青</span>
</body>
</html>
#color_red {
    color: red;
}

#color_blue {
    color: blue;
}

同じidを複数設定したらどうなる?

一応動きます。
ではなぜ、複数箇所に同じidを設定してはいけないのでしょうか。「そういう決まりがあるから」と思っておきましょう。
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<span id="color_red">こっちは赤</span>、<span id="color_red">そっちは青</span>
</body>
</html>

class

複数箇所にcssを反映させたい場合は、classを使用するようにしましょう。
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<span class="color_red">こっちは赤</span>、<span class="color_red">こっちも赤</span>
</body>
</html>
.color_red {
    color: red;
}
idとclassの併用も可能です。
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<span id="bold_text" class="color_red">こっちは赤</span>、<span class="color_red">こっちも赤</span>
</body>
</html>
.color_red {
    color: red;
}
#bold_text {
    font-weight: bold;
}

セレクタの書き方

classの場合はドット(.)、idの場合はシャープ(#)と覚えましょう。
セレクタはカンマ区切りで複数書くことも可能です。
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="wrap">
<p class="p1">おはようございます</p>
<p class="p2">今日もいい天気です</p>
<p class="p3">さようなら</p>
</div>
<p class="p4">また会いましょう</p>
</body>
</html>
.p1, .p3 {
    color: red;
}
セレクタをスペース区切りにすると、条件を絞ることができます。
.wrap p {
    color: red;
}
セレクタを(スペース無しで)連続して書くと、複数のセレクタが設定されている要素に絞ることができます。
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<p class="all p1">おはようございます</p>
<p class="all p2">今日もいい天気です</p>
<p class="all p3">さようなら</p>
</body>
</html>
.all.p2 {
    color: red;
}