CSS：ID、Classセレクタの違い「CSS実践編：CSSの基本step.2」

CSS実践編：CSSの基本step.2

前回は、HTMLとCSSの役割、バリデータツールのご紹介、CSS装飾の仕組み、CSSの基本の形、CSSに大事な基本のセレクタを記載いたしました。

予想はしておりましたが、やはり一からご説明となりますと、メチャクチャ長くなりそうですがッ、基本をしっかり押さえれば、多くの皆様に見て頂けるホームページを作成することが出来るようになるかと思いますので、ここはじっくりと記載していきます...。

それでは今回はッ、

上記について記載していこうと思います...。

ID、Class：セレクタの違い

前回も多少ふれましたがッ、IDとcalssセレクタは、どちらもHTMLを作成する際にidまたはclass属性値として付けた名前を使用します。

idとclassの違いは、id名は特定の要素に付けられる固有の名前なのに対して、class名は複数の要素に付けることが許されている、という点になります。

なので、ひとつのHTML文章の中で同じclass名が重複するとこはありますが、id名が重複することがあってはイケません...。

たとえば、共通のスタイルを指定したいブロックがページ内に複数あれば、それぞれのブロックにclass名を付け、ヘッダーやフッターなどページ内に一度しか登場しないブロックには、id名を付けます。

また、以前どこかで、
「面倒だから、すべてclassで指定しています！」
と記載されていることを見たことがありますが、コレはページ作成に好ましくありません。

id名を付ける利点としては、コンピューターがidとの関連するCSSをclass名に比べ早く処理することが可能です。 一方、class名はid名に比べ処理速度が劣りますが、複数回目のclass名の処理は、id名より早く処理を行うことになります。

結論といたしましては、適材適所にid名とclass名を記載するのがもっとも記載方法としては良いとされています。

id名とclass名のマークアップを行う際は、上記の事を踏まえ、記載するようおすすめいたします。

• 
  【フルオーダー】最高峰の制作プラン

  徹底的にこだわるプレミアムプランの詳細を見る

• 
  失敗しないWeb制作の進め方

  お問い合わせから納品まで 制作の流れを解説

良く利用されるセレクタ名

それでは一覧にてid名とclass名でよく使われる単語をご紹介。

セレクタの組み合わせ

スタイルを指定する要素のすべてにid名やclass名を付けようとすると、上記の一覧表を参考にして、名前を考えるだけでも大変です。

そこで基本のセレクタで紹介したセレクタを組み合わせることで、すべてに名前を付けなくとも、任意の要素を細かく指定することが出来ます。言葉で説明するよりも、実際のソースコードを見て頂いた方が、ご理解いただけるかと思います。

下記ソースコードを私の大好きな「ExcelVBAの神様」より...。

/*------ セレクタの組み合わせサンプルスースコード --------*/

<h1>ExcelVBAの神様</h1>
<h2>真二、変数に腰を抜かす</h2>
<p>ふと顔を上げると、水岡遥香と目があった。</p>
<p>彼女は、軽く笑ってくれた。</p>
<p>ささやかではあるが幸福感に包まれたそのとき、<br>
<em>ボクを呼ぶ声がした。</em></p>
<h2>真二、条件分岐と繰り返しVBAのすごさを知る</h2>

/*------ 以下スタイルシートの説明 --------*/

/*-- ①CSS「子孫セレクタ」 --*/ 
p em {
  color: red;
}

/*-- ②CSS「子セレクタ」 --*/
p>em {
  color: green;
}

/*-- ③CSS「隣接セレクタ」 --*/
h2+p {
  color: blue;
}

/*-- ④CSS「複数セレクタ」 --*/
h1,h2 {
  color; orange;
}

セレクタの組み合わせ、一覧で見てみますと簡単ですねッ...。

とりあえず、今回はここまで...。

お仕事のご依頼は下記より...、それではまた次回...。

• 
  売上UPに直結！ECサイト運用

  売上を伸ばすECサイト運営代行サービス

• 
  プロの撮影でサイトの質UP

  プロ仕様の品質ホームページ用撮影サービス