CSS ・ CSSの記法
#id
idセレクタ（1つだけの要素を指定）
HTMLの id 属性の値に「#」を付けて、その要素を指定するセレクタです。id はページ内で1つだけの要素に付ける名前です。
01
サンプルコード
HTML
1<header id="site-header">カフェ・ミモザ</header>
2<p>id は1ページに1つだけの要素に付けます。</p>
CSS
1#site-header {
2 padding: 12px 16px;
3 background: #201f1d;
4 color: #fff;
5 font-weight: bold;
6}
02
実行結果
ブラウザでの表示
03
解説
id セレクタは、HTMLの id 属性の値の前に # を付けて書きます。id="site-header" の要素なら #site-header です。
id は「ページ内で1つだけ」の要素に付ける名前で、同じ値をページ内で2回以上使ってはいけません。ページ内リンク（<a href="#site-header">）や JavaScript で要素を取得するときの目印にもなります。
id セレクタは詳細度がとても高い（≒100点）ため、後からクラスで上書きしにくくなります。見た目の指定には基本的にクラスを使い、id はリンク先や JavaScript 用に使うのがおすすめです。
04
応用例・注意点
id と class の違い
| 項目 | 説明 |
|---|---|
書き方 | id は #名前、class は .名前 |
ページ内の数 | id は1つだけ、class は何度でも使える |
1つの要素に付ける数 | id は1つ、class は複数（空白区切り） |
詳細度 | id ≒ 100点、class ≒ 10点 |
主な用途 | id はページ内リンク・JavaScript、class はスタイル指定 |
ページ内リンクの移動先にする
id を付けた要素へ、# 付きのリンクでジャンプできます。
HTML
1<a href="#access">アクセスへ移動</a>
2…
3<section id="access">
4 <h2>アクセス</h2>
5</section>
注意点
- 01同じ id を1ページで複数回使うと、ページ内リンクや JavaScript が正しく動きません。
- 02id 名の先頭に数字は使わないようにします（CSSで指定しにくくなるため）。
- 03id 名は英小文字とハイフンでつなぐ書き方（site-header など）が一般的です。