サーチ…
前書き
クラスとIDにより、スクリプトやスタイルシートのHTML要素を参照しやすくなります。 class属性は、1つ以上のタグで使用でき、CSSによってスタイリングに使用されます。 IDは単一の要素を参照することを意図しています。つまり、同じIDを決して2度使用しないでください。 IDは一般的にJavaScriptと内部文書リンクで使用され、CSSでは推奨されません。このトピックでは、HTMLのクラス属性とID属性の適切な使用方法に関する有用な説明と例を示します。
構文
- class = "class1 class2 class3"
- id = "uniqueid"
パラメーター
| パラメータ | 詳細 |
|---|---|
| クラス | 要素のクラス（非一意）を示します。 |
| id | 要素のIDを示します（同じコンテキストで一意です） |
備考
-
classとidはどちらもグローバル属性であるため、任意のHTML要素に割り当てることができます。 - クラス名はアルファベット（AZまたはaz）で始まり、その後に文字、数字、ハイフン、アンダースコアを付けることができます。
-
HTML5では、class属性とid属性を任意の要素で使用できます。 HTML 4.0.1では、<base>、<head>、<html>、<meta>、<param>、<script>、<style>、<title>タグは使用できませんでした。 - 要素は1つ以上のクラスを持つことができます。クラスはスペースで区切られており、スペース自体を含むことはできません。
- 要素はIDを1つしか持たず、そのコンテキスト（Webページ）内で一意でなければなりません。 IDにはスペース自体を含めることもできません。
要素にクラスを与える
クラスは、割り当てられている要素の識別子です。クラスに要素を割り当てるには、 class属性を使用します。
<div class="example-class"></div>
要素に複数のクラスを割り当てるには、クラス名をスペースで区切ります。
<div class="class1 class2"></div>
CSSでのクラスの使用
クラスは、そのような要素のすべてを変更することなく、特定の要素をスタイリングするために使用できます。たとえば、これらの2つのspan要素は完全に異なるスタイリングを持つことができます。
<span></span>
<span class="special"></span>
同じ名前のクラスは、ページ上の任意の数の要素に与えることができ、それらはすべてそのクラスに関連付けられたスタイリングを受け取ります。 CSS内で要素を指定しない限り、これは常に真です。
たとえば、2つの要素があり、いずれもhighlightクラスです。
<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>
CSSが次のような場合、両方の要素のテキストに緑色が適用されます。
.highlight { color: green; }
しかし、クラスのhighlightでdivをターゲットにしたい場合は、以下のような特異性を追加することができます：
div.highlight { color: green; }
それにもかかわらず、CSSでスタイリングするときは、クラスを持つ要素（ div.highlight ）ではなく、クラス（ .highlight ）のみを使用することをお勧めします。
他のセレクタと同様に、クラスはネストすることができます：
.main .highlight { color: red; } /* Descendant combinator */
.footer > .highlight { color: blue; } /* Child combinator */
クラスセレクタを連鎖させて、複数のクラスの組み合わせを持つ要素だけを選択することもできます。たとえば、これがHTMLの場合：
<div class="special left menu">This text will be pink</div>
そして、この特定のピンクのピンク色に色を付けるために、CSSで次のことを行うことができます：
.special.left.menu { color: pink; }
要素にIDを与える
要素のID属性は、文書全体で一意でなければならない識別子です。その目的は、リンクする（アンカーを使用する）、スクリプトを作成する、またはスタイリング（CSSを使用する）の際に要素を一意に識別することです。
<div id="example-id"></div>
属性が2つの異なる種類の要素に関連付けられていても、同じ文書内に同じIDを持つ2つの要素を持つべきではありません。たとえば、次のコードは正しくありません。
<div id="example-id"></div>
<span id="example-id"></span>
ブラウザはこのコードをレンダリングするために最善を尽くしますが、CSSでスタイリングするかJavaScriptで機能を追加すると予期しない動作が発生することがあります。
CSSでIDで要素を参照するには、IDの先頭に#ます。
#example-id { color: green; }
指定されたページ上のIDを持つ要素にジャンプするには、URLに要素名を付けて#を追加します。
http://example.com/about#example-id
この機能はほとんどのブラウザでサポートされており、JavaScriptやCSSを追加する必要はありません。
重複したIDに関連する問題
同じIDを持つ複数の要素を持つことは、トラブルシューティングが難しい問題です。 HTMLパーサーは、通常どんな場合でもページのレンダリングを試みます。通常、エラーは発生しません。しかし、そのペースは、誤ったふるまいのWebページに終わる可能性があります。
この例では：
<div id="aDiv">a</div>
<div id="aDiv">b</div>
CSSセレクタはまだ動作します
#aDiv {
color: red;
}
しかし、JavaScriptは両方の要素を処理できません。
var html = document.getElementById("aDiv").innerHTML;
この場合、 html変数は最初のdivコンテンツ("a")ます。
許容値
IDの場合
idの値に対する唯一の制限はidとおりです。
- ドキュメント内で一意でなければなりません
- 空白文字を含むことはできません
- 少なくとも1つの文字を含む必要があります
したがって、値はすべての数字、ちょうど1桁、ちょうど句読点文字、特殊文字を含むことができます。ちょうど空白。
したがって、これらは有効です：
<div id="container"> ... </div>
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>
これは無効です：
<div id=" "> ... </div>
同じ文書に含まれている場合、これも無効です。
<div id="results"> ... </div>
<div id="results"> ... </div>
id値は文字で始まる必要があります。文字の後に続くことができるのは、
- 手紙（AZ / az）
- 数字（0〜9）
- ハイフン（ " - "）
- アンダースコア（_）
- コロン（ "："）
- ピリオド（ "。"）
上のHTML5のセクションの最初のグループの例を参照すると、有効なものは1つだけです。
<div id="container"> ... </div>
これらも有効です：
<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>
繰り返しますが、文字（大文字または小文字）で始まらない場合は無効です。
クラスのために
クラスの規則は基本的にidと同じです。違いは、 class値がドキュメント内で一意である必要はないということです。
上記の例を参照すると、これは同じ文書では有効ではありませんが、
<div id="results"> ... </div>
<div id="results"> ... </div>
これは完全に大丈夫です：
<div class="results"> ... </div>
<div class="results"> ... </div>
重要な注意：IDとクラスの値がHTMLの外部でどのように扱われるか
上記のルールと例は、HTMLのコンテキスト内で適用されることに注意してください。
idやclass値に数字、句読点や特殊文字を使用すると、CSS、JavaScript、正規表現などの他のコンテキストで問題が発生する可能性があります。
たとえば、次のidはHTML5で有効ですが、
<div id="9lions"> ... </div>
...それはCSSで無効です：
CSSでは、 識別子 （セレクタ内の要素名、クラス、およびIDを含む）には、文字[a-zA-Z0-9]およびISO 10646文字U + 00A0以上、ハイフン（ - ）およびアンダースコア_）; 2桁のハイフン、または1桁のハイフンで開始することはできません 。 （強調が加えられた）
ほとんどの場合、制限や特別な意味を持つ文脈で文字をエスケープすることができます。