目次
cssのidとclassとは？
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は１ページ（htmlファイル）に一回まで使用可能
- ページ内リンクを作成できる
idの記入方法(HTMLとCSS)
- idのHTML側の記述
- idを指定するには<index.html>の指定したい要素<タグ>内にid="id名"を記述します。ここでは例として段落<p>タグを使用しています。
- idのCSS側の記述
- idを指定する際はid名の先頭に#をつけ#id名として指定します。
- {プロパティ:値；}でCSSのスタイルを指定する。
idの表示例
"こんにちは！"という見出しが表示されており10pxの青の実線枠線で装飾されているのが分かります。
idのHTMLコード例
HTMLコード
|
1 2 3 |
<body> <h1 id="Aisatsu">こんにちは!</h1> </body> |
CSSコード
|
1 2 3 |
#Aisatsu{ border: solid 10px blue; } |
- <index.html>の<p>タグ内にid="Aisatsu"を記述します。
- <style.css>のidを指定する際はid名の先頭に#をつけ#Aisatsuとして指定しています。
- {border : Solid 10px blue；}でCSSのスタイルを指定する。
classとは？
classの特徴
- cssを適用する為に、要素をグループ化して一括適用することができる
- 複数回使用することができる
classの記入方法(HTMLとCSS)
- classのHTML側の記述
- classを指定するには<index.html>の指定したい要素<タグ>内にclass="class名"を記述します。ここでは例として段落<p>タグを使用しています。
- classのCSS側の記述
- classを指定する際はclass名の先頭に#をつけ#class名として指定します。
- {プロパティ:値；}でCSSのスタイルを指定する。
classのHTML・CSSコード例
HTMLコード
|
1 2 3 |
<body> <h1 class="Aisatsu">Good morning!</h1> </body> |
CSSコード
|
1 2 3 |
.Aisatsu{ border: solid 10px blue; } |
- <index.html>の<p>タグ内に[class="Aisatsu"]を記述します。
- <style.css>のclassを指定する際はclass名の先頭にドット<.>をつけ[.Aisatsu]として指定しています。
- {border : Solid 10px blue；}でCSSのスタイルを指定する。
idとclassの違い
cssの優先順位の違い
cssの優先順位
important! > インラインのスタイル > idセレクタ > classセレクタ
idはclassよりも優先順位が高くなります。HTML要素に対してidとclassの両方を指定した場合は、idで指定した内容が優先されます。
javascriptを使う時はidの方が処理が早い
JavaScriptはweb上に動きをつける言語ですが、処理速度が遅くなりパフォーマンスが落ちることがあります。classではなくidを使うことにより３倍近く処理速度を向上させることができます。
「id」と「class」の使い分け
idとclassの使い分け
- 通常時・・・classを利用
- JS使用時・・・idを利用
- ページ内リンク・・・idを利用
このようにidとclassは使い分ける必要があります。
基本的にcssを割り当てるためにはclassを使う
基本的にcssを使って装飾を行う場合はclassを使用すれば問題ありません。
class指定している要素の中で特定の要素のみ別のcssを適用したい場合は、id指定を行うことにより、特定の要素にのみcss装飾を行うことができます。
classとidの使い分け表示例
classとidの使い分けコード例
HTMLコード
|
1 2 3 4 5 6 7 |
<body> <div> <div id="Hitomi">HItomi</div> <div class="Ume">Yoshihiro</div> <div class="Ume">Mei</div> <div> </body> |
CSSコード
|
1 2 3 4 5 6 7 |
.Ume{ border:solid 10px blue; } #Hitomi{ border: double 10px red; } |
YoshihiroとMeiに対してはclassセレクタでcssを指定し、Hitomiにはidを指定する。グループに対してはclass指定をし、一つの要素にcssを指定する際には、idを指定する。
JavaScriptやページ内リンクなどを指定するときはid
Javascriptやページ内リンクなどを指定する場合はidを使用します。id でノードを検索するには、dcumentオブジェクトのgetElementByldメソッドを使用します。idはノードを識別するための属性で、それぞれのノードに設定することができる。
|
1 |
document.getElementById(“id名”) |
DOMとノードとは？
DOM（document 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ファイルの要素を指定する場合、サイト内リンクを使用する場合に指定する。