CSSにおけるidとclassの主な違いは、idが一意の要素にスタイルを適用するために使われるのに対し、classは複数の要素にスタイルを適用するために使われることです。
ウェブ開発にはさまざまな技術があります。
Webサイトを開発するための主な言語として、HTML、CSS、JavaScriptがあります。
HTMLは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略。
HTMLはHyper Text Markup Languageの略で、ウェブページの構造を記述するのに役立つ。
JavaScriptは、ウェブページをよりダイナミックにするのに役立ちます。
CSSは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略です。
スタイルを追加し、ウェブページをより見やすくするのに役立ちます。
CSSのルールは、HTMLの要素に適用されます。
また、CSSのセレクタは、要素を見つけ、必要なスタイルをHTMLタグに適用するのに役立ちます。
CSSルールとは
CSS は一連のルールで構成されています。
ブラウザはこのルールを解釈し、文書内の指定された要素に適用することができます。
CSS スタイルルールは、3 つのセクションで構成されます。
それらは、セレクタ、プロパティ、値です。
宣言とは、プロパティと値の組み合わせのことです。
中括弧で囲んで次のように記述する。
セレクタ { プロパティ : 値; }.
セレクタ – スタイルを適用する要素を特定するのに役立ちます。
プロパティ – 属性。
すべてのHTML属性はCSSのプロパティに変換されます。
例としては、color、text-align、borderなどがあります。
値 – 値は、プロパティに割り当てられるものです。
例えば、colorに青色を指定することができる。
idとは
プログラマーは、要素の id に基づいてスタイル規則を定義することができます。
同じidを持つ要素はすべて、定義されたスタイルが適用されます。
特定の id を持つ要素を選択するには、#（ハッシュ）記号の後にその要素の id を記述する必要があります。
HTMLファイルに次のような記述があるとする。
CSSファイルには、次のような記述があります。
header1{
color : 青。
}
ブラウザがこのHTML文を解釈するとき、CSSファイル中のheader1であるh1要素のidをチェックします。
そして、定義されたCSSルールをh1要素に適用します。
したがって、Hello Worldというテキストは青色で表示されることになります。
idはページ内で一意です。
したがって、idセレクタは1つのユニークな要素に対して使用されます。
クラスとは
id と同様に、プログラマーは要素のクラスに基づいてスタイル規則を定義することができます。
同じクラスの要素はすべて、定義されたスタイルで適用されます。
特定のクラスを持つ要素を選択するには、.（ピリオド）記号の後にクラス名を付けます。
HTMLファイルに次のような記述があるとします。
CSSファイルには、次のような記述があります。
.header1{
color : blue;
}
ブラウザは、このHTML文を解釈するときに、h1要素のクラスを調べますが、このクラスはCSSファイルではheader1になっています。
そして、定義されたCSSルールをすべてのh1要素に適用します。
したがって、Hello World 1 と Hello World 2 というテキストは、青色で表示されます。
複数の要素に同じクラスを使用することも可能です。
そのため、クラスセレクタは複数の要素に対して使用されます。
CSSにおけるidとclassの違い
定義
idは指定されたidで要素をスタイルするCSSのセレクタであり、classは指定されたクラスで選択された要素をスタイルするCSSのセレクタです。
構文
idの構文は#id{ css declarations ; }です。
class構文は、.class { css declarations; }です。
使用方法
なお，idの使い方は，特定の要素にスタイルを適用するものです。
また、idは特定の要素に、classは複数の要素にスタイルを適用するためのものです。
結論
CSSのidとclassは、HTMLの要素にスタイルを適用するための2つのセレクタです。
CSSにおけるidとclassの主な違いは、idが一意の要素にスタイルを適用するために使われるのに対して、classは複数の要素にスタイルを適用するために使われることです。
