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と組み合わせて、素敵なサイトを作ってくださいね!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ナナミ

ナナミ

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

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー