classとidで印を付ける

導入

同じ要素がたくさんあるとき、「これはこのグループ」「これは特別なこの1つ」と区別する目印が class と id です。次章の CSS で、この目印を使って装飾します。

説明

• class … 同じ印を 複数の要素 に付けられる（グループ分け）
• id … ページ内で 1つだけ の名前（唯一の印）

<p class="note">お知らせ1</p>
<p class="note">お知らせ2</p>
<p id="main-title">この見出しは唯一</p>

class="note" は複数に付けてグループにできます。id は1ページに1つだけにするのがルールです。

やってみよう

上の例を打ち込みましょう。今は見た目に変化はありませんが、この目印が次章で活きてきます。class を複数に、id を1つだけに付けるのがポイントです。

演習

class="btn" を付けた <p>ボタン</p> を作ってください。