[初心者向け徹底解説]〜CSSセレクタ〜idセレクタとclassセレクタの使い方

CSS

idセレクタとclassセレクタの基本的な使い方

idセレクタとclassセレクタの使い方

HTMLやCSSを勉強し始めた時、序盤で登場するのがidセレクタとclassセレクタになります。

いわば基本中の基本のセレクタですが、ここではidセレクタとclassセレクタの基本的な使い方について解説していきます。

idセレクタとclassセレクタの違いって何だっけ???という方はまずこちらをご覧ください。

[初心者向け徹底解説]〜CSSセレクタ(idセレクタとclassセレクタの違いとは??)
idセレクタとclassセレクタの違いを簡単解説 CSSを学んでいくと序盤のほうでセレクタという言葉が出てきます。 HTMLで作成した要素にスタイルを適用させる時に必要な式がCSSセレクタでしたね。 CSSセレクタは色...

CSSセレクタ〜idセレクタの使い方

idセレクタの基本的な書き方

idセレクタは特定のid名がつけられたHTML要素を指定してスタイルを適用する方法になります。

基本的な書き方(書式)は以下のようになります。

書式  #id名 {プロパティ: 値;}

簡単な例を見ていきましょう

id名test1の画像
HTML<div id="test1">
<p>これはtest1というid名で背景色はイエローを指定しています。</p>
</div>
CSS#test1 {
background-color: yellow;
}

HTMLではdiv要素に対してid名=test1を指定しています。

CSSで#test1と入力してスタイルを適用させます。

具体的なスタイルは{ }の中に記述していきます。

ここでは背景色を指定するbackground-color:を使用して、yellow;を適用させています。

実際のエディタ画面を見てみます。

idセレクタ指定のエディタ画面

idセレクタは同じid名を何回でも使用できる?

先ほどdiv要素に対してid名=test1を指定して、具体的な例を見ていきました。

そしたらこんな疑問が出てくるかもしれません。

「div要素は1ページ内に何回も出てくるけど、同じid名を使えるのかな???」

答えは

同一ページ内で同じid名は使用できません

それでは実際にどのように表示されるか見ていきましょう。

idセレクタを複数回使った場合

上の図はdiv要素に対して2回、p要素に対して1回、id名=test1を指定している場合です。

実際にサイトに表示される画面では、全てスタイルが適用されています。

「あれ???ちゃんとブラウザに表示されるなら使ってもいいんじゃないの???」って思われるかもしれませんが、HTMLのルールでは、同名のid名は1ページに1回までとなっています。

HTMLのルールでは同じ名前のidは1ページに1回しか使えない

ここは混乱しやすいところなので、しっかり覚えておいて下さい。

どのような場面でidセレクタを使用するの?

HTMLのルールでは同じ名前のidは1ページに1回しか使えないということが分かりましたね。

それでは、一体どのような場面でidセレクタを使用すれば良いのでしょうか?

それは、idで指定する要素が特定の場所を指定している時です。

具体的な例を見ていきましょう。

idセレクタの使用場所例

classセレクタ〜classセレクタの使い方

classセレクタの基本的な書き方

classセレクタは特定のclass名がつけられたHTML要素を指定してスタイルを適用する方法になります。

基本的な書き方(書式)は以下のようになります。

書式  .class名 {プロパティ: 値;}

簡単な例を見ていきましょう

class名test1の画像
HTML<div class="test1">
<p>これはtest1というclass名で背景色はシルバーを指定しています。</p>
</div>
CSS.test1 {
background-color: silver;
}

HTMLではdiv要素に対してclass名=test1を指定しています。

CSSで.test1と入力してスタイルを適用させます。

具体的なスタイルは{ }の中に記述していきます。

ここでは背景色を指定するbackground-color:を使用して、silver;を適用させています。

実際のエディタ画面を見てみます。

classセレクタ指定のエディタ画面

classセレクタは同じclass名を何回でも使用できる?

先ほどdiv要素に対してclass名=test1を指定して、具体的な例を見ていきました。

そしたらこんな疑問が出てくるかもしれません。

「idセレクタの場合は同じid名は1ページ内で1回しか使えなかったけどclass名はどうなのかな???」

答えは

同一ページ内で同じclass名は何回でも使うことができます。

それでは実際にどのように表示されるか見ていきましょう。

同じclass名を3回使用したエディタ画面

上の図はdiv要素、p要素、span要素に対してclass名=test1を指定している場合です。

classセレクタはidセレクタと違い、同一ページで同じ名前のclass名を使うことができます。

同じ名前のclass名は1ページで繰り返し使用可能

idセレクタはidで指定する要素が特定の場所を指定している時に使用すると良かったですが、classセレクタは、どの場面でも繰り返して使うことができるので、使用頻度が高いセレクタになります。

まとめ

idセレクタとclassセレクタの使い方を解説してきましたが、何となくイメージはつかめたでしょうか?

CSSを勉強したての頃は、idセレクタを使わずclassセレクタのみでも大丈夫です。

慣れてきてからidセレクタを使っていくという方法も良いかもしれませんね。

コメント

タイトルとURLをコピーしました