CSS

CSSのidとclassとは?違いを分かりやすく説明

https://owl-view.com

cssのidとclassとは?

classとidの違いの図解

HTMLの特定の要素にcssを適用し装飾を施したい場合classやidを使用して特定の要素を識別しcssを適用します。どちらもCSSを適用する際に要素を特定する役割を担いますがd使い分けをする必要あります。classとidは特定する対象要素の範囲に違いがあります。

うめ組、たんぽぽ組、さくら組という一つ40人のクラスが三つあり、そのうち一つをclass="Ume"という分類でグループ化します。うめ組(class="Ume")に所属する生徒達(要素)にはcssを適用します。うめ組のひとみさんにはclassの他の生徒達に適用しているcssとは異なる特別な措置を施さなければなりました。そのような場合にひとみさんに対してid="Hitomi"と指定することでひとみさんだけに特別にCSS装飾を適用ことができます。

class指定されている要素に対してid指定した場合は、idが適用されます

idとは?

idの特徴

  • cssを適用する為に、一意に一つの要素を指定できる
  • 一つのidは1ページ(htmlファイル)に一回まで使用可能
  • ページ内リンクを作成できる

idの記入方法(HTMLとCSS)

idの指定

  • idのHTML側の記述
  1. idを指定するには<index.html>の指定したい要素<タグ>内にid="id名"を記述します。ここでは例として段落<p>タグを使用しています。
  • idのCSS側の記述
  1. idを指定する際はid名の先頭に#をつけ#id名として指定します。
  2. {プロパティ:値;}でCSSのスタイルを指定する。

idの表示例

idを使用した際の表示例

"こんにちは!"という見出しが表示されており10pxの青の実線枠線で装飾されているのが分かります。

idのHTMLコード例

HTMLコード

 

CSSコード

 

  1. <index.html>の<p>タグ内にid="Aisatsu"を記述します。
  2. <style.css>のidを指定する際はid名の先頭に#をつけ#Aisatsuとして指定しています。
  3. {border : Solid 10px blue;}でCSSのスタイルを指定する。

classとは?

classの特徴

  • cssを適用する為に、要素をグループ化して一括適用することができる
  • 複数回使用することができる

classの記入方法(HTMLとCSS)

classの指定方法

  • classのHTML側の記述
  1. classを指定するには<index.html>の指定したい要素<タグ>内にclass="class名"を記述します。ここでは例として段落<p>タグを使用しています。
  • classのCSS側の記述
  1. classを指定する際はclass名の先頭に#をつけ#class名として指定します。
  2. {プロパティ:値;}でCSSのスタイルを指定する。

classのHTML・CSSコード例

HTMLコード

 

CSSコード

 

  1. <index.html>の<p>タグ内に[class="Aisatsu"]を記述します。
  2. <style.css>のclassを指定する際はclass名の先頭にドット<.>をつけ[.Aisatsu]として指定しています。
  3. {border : Solid 10px blue;}でCSSのスタイルを指定する。

idとclassの違い

idとclassの違いについて

cssの優先順位の違い

cssの優先順位

important! > インラインのスタイル > idセレクタ > classセレクタ

idはclassよりも優先順位が高くなります。HTML要素に対してidとclassの両方を指定した場合は、idで指定した内容が優先されます。

javascriptを使う時はidの方が処理が早い

JavaScriptはweb上に動きをつける言語ですが、処理速度が遅くなりパフォーマンスが落ちることがあります。classではなくidを使うことにより3倍近く処理速度を向上させることができます。

「id」と「class」の使い分け

idとclassの使い分け

  • 通常時・・・classを利用
  • JS使用時・・・idを利用
  • ページ内リンク・・・idを利用

このようにidとclassは使い分ける必要があります。

基本的にcssを割り当てるためにはclassを使う

基本的にcssを使って装飾を行う場合はclassを使用すれば問題ありません。

class指定している要素の中で特定の要素のみ別のcssを適用したい場合は、id指定を行うことにより、特定の要素にのみcss装飾を行うことができます。

classとidの使い分け表示例

classとidの使い分けコード例

HTMLコード

 

CSSコード

 

YoshihiroとMeiに対してはclassセレクタでcssを指定し、Hitomiにはidを指定する。グループに対してはclass指定をし、一つの要素にcssを指定する際には、idを指定する。

JavaScriptやページ内リンクなどを指定するときはid

JSでidを指定する

Javascriptやページ内リンクなどを指定する場合はidを使用します。id でノードを検索するには、dcumentオブジェクトのgetElementByldメソッドを使用します。idはノードを識別するための属性で、それぞれのノードに設定することができる。

DOMとノードとは?

DOMdocument object model は、 HTML文書やXML文書をプログラムからどのように扱うかを規定したAPI(application program Interface)です。DOMを使うことで、JavaScriptからHTML文書の内容を参照したり、変更したりする。

ノードは、そのツリー構造から親子関係で表現されます。HTMLファイルはノードという表現がされます。HTMLファイルは<body>タグは親ノード、<section>は基準ノード、<div>は子ノードという表現がされます。

まとめ

Classとid

  • classはHTMLの要素をグループ化(分類化)してCSSを適用する際に使用
  • id一つの要素に対してCSSを適用する場合や、JavaScriptでHTMLファイルの要素を指定する場合サイト内リンクを使用する場合に指定する。

-CSS
-

© 2021 OWLVIEW Powered by AFFINGER5