CSSとidの関係とは?要素に名前をつけて細かくデザイン指定しよう

こんにちは! ライターのナナミです。

この記事にたどり着いたあなた、idについてお困りですね?

CSSを特定のidに適用させたい…
classと何が違うんだろう…

というお悩みが多いと思います。

今回はidを徹底解説!
特徴から使い方、classとの違いまでバッチリ解説していきます。

この記事は下記の流れで進めていきます。

【基礎】idとは何か
【基礎】idの指定方法
【発展】idを使った実装色々
【発展】使うべきタイミング

idはCSSを扱う上で必須の知識です。
しっかり覚えて、活用できるようになりましょう!

idとは?

HTMLタグって色々種類がありますよね。
でもあくまでそれはグループ分けにすぎません。

あの<a>タグは赤くしたいけどこっちの<a>タグは青にしたい…

なんて時、それぞれを区別する名前があれば、指定を分けることができます。

その名前がidです。
要素に、その要素だけの名前をつけることができます

同じ名前は1ページにひとつだけ

例えば、Aさんの家に猫が3匹いるとしましょう。

id1

同じ猫でも区別をつけるために、それぞれ違う名前をつけますよね。

id2

Bさんの家でも猫が2匹いるとします。
こちらでも区別のために名前をつけますが、先ほどの3匹と名前が同じですね。

しかし家が別なので、きちんと区別することができます。

これと同じように、要素につけるidは、1ページ内で1回しか使ってはいけません
そのページ内の、そのただひとつを指す名前がidなのです。

classと何が違う?

同じように要素に名前をつけるもので、classというものがあります。
classはidと違い、1ページ内で何度でもつけることができます

id3

classはグループ分けのイメージです。
先ほどの3匹の猫で例えれば、1匹はオスで2匹はメス、というような感じですね。

id4

後から新しい猫(メス)が来たら、その子はメスのグループ(class)に入れることができます。

しかし、シロという名前はすでに使われているので、新しくユキという名前(id)をつけることになるのです。

idの指定方法

では、要素に名前をつけてみましょう。
方法は簡単、HTMLの開始タグの後ろにid=”名前”とつけてあげるだけです。

HTML

<div id="test">
    これはテストです
</div>

これでこの<div>タグには、testという名前が付けられました。

idを使った実装色々

ただ名前をつけただけでは、CSSを適用させたりすることはできませんね。
idを使う場面を紹介していきましょう。

CSSのセレクタとして使う

CSS要素を指定する記述を、セレクタといいます。
セレクタは、idなどの要素の名前での指定が可能です

名前が付いていることで、そのページ内のその要素にだけ適用するCSSを書くことができるのです。

idを表す時は、頭に#(シャープ)をつけて、id名を記述します

HTML

<div id="test">
    これはテストです
</div>

CSS

#test{
    /* testというidがついてる要素のCSS */
}

実際に使ってみると、こんな感じです。

id5

HTML

<div id="test">
    これはテストです
</div>
<div id="test2">
    これはテストです
</div>

CSS

#test {
    background-color: #F44336;  /* 背景色指定 */
}
#test2 {
    background-color: #2196F3;  /* 背景色指定 */
}

同じHTMLタグでも、これで別々の見栄えにすることができますね。

idで指定したCSSは優先度が高い

CSSを指定する時、idで指定したかclassで指定したかで、どのCSSが適用されるかの優先度が変わってきます

CSSは基本的に、以下のような優先度で適用されます。

id > class > HTMLタグ

classで指定したCSSよりも優先して適用させたいCSSがある場合、idを使うのも手ですね。

アンカーリンクを指定する

idをつけてあげることで、<a>タグのリンク先をページ内のその要素がある位置に指定することができます。
これをアンカーリンクと言います。

ページ内でのアンカーリンクならば、下記のように指定することができます。

ここをクリックすると「アンカーリンクを指定する」の位置に動きます。

HTML

アンカーリンクを指定する

<a href="#test">ここをクリックすると「アンカーリンクを指定する」の位置に動きます。</a>

目的の箇所まで一気に移動させることができて、かなり便利ですね。

使うべきタイミングは?

idで名前をつけてあげるべきタイミングは、下記のような時です。

idが向いているパターン
・アンカーリンクを指定したい
・そのページで、その要素だけを明確に指定したい など

逆に向いていない時も多々あります。
その場合はclassでグループ名をつけるなどで対応してみましょう

idは向いていないパターン
・同じ見栄えが繰り返し使われる場合
・CSSを使いまわしたい場合 など

まとめ

いかがでしたか?

idは名前、ページ内で同じ名前は1回しか使えない。

ここさえ押さえておけばidを使うのは簡単です。

CSSと組み合わせて、素敵なサイトを作ってくださいね!

Writer

ナナミ

株式会社SAMURAI

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら