HTML 要素の属性を作成する場合id、値にはどのようなルールがありますか?
ベストアンサー1
のためにHTML4 について答えは技術的には次のようになります。
ID トークンと NAME トークンは文字 ([A-Za-z]) で始まる必要があり、その後に任意の数の文字、数字 ([0-9])、ハイフン (「-」)、アンダースコア (「_」)、コロン (「:」)、およびピリオド (「.」) が続くことができます。
HTML5 についてはさらに寛容で、ID には少なくとも 1 つの文字が含まれている必要があり、スペース文字を含めることはできない、とだけ規定しています。
id属性は大文字と小文字が区別されます。テキスト。
純粋に実用的な問題として、特定の文字を避けたい場合があります。ピリオド、コロン、および「#」はCSSセレクタで特別な意味を持つため、これらの文字をエスケープする必要があります。CSS のバックスラッシュまたは二重のバックスラッシュjQueryに渡されるセレクタ文字列ID にピリオドやコロンを多用しすぎる前に、スタイルシートやコードで文字をエスケープしなければならない頻度を考えてみましょう。
たとえば、HTML 宣言は<div id="first.name"></div>有効です。CSS では として#first\.name、jQuery では次のように要素を選択できます。$('#first\\.name').ただし、バックスラッシュ を忘れると、id を持ち、クラス も持つ$('#first.name')要素を検索する完全に有効なセレクターになります。これは見落としがちなバグです。代わりに id (ピリオドではなくハイフン) を選択した方が長期的には満足できるかもしれません。firstnamefirst-name
命名規則に厳密に従うことで、開発タスクを簡素化できます。たとえば、小文字のみに限定し、単語をハイフンまたはアンダースコアで区切る (ただし、両方ではなく、どちらか一方だけを選択し、もう一方は決して使用しない) と、覚えやすいパターンになります。 と入力する必要があることが常にわかるため、 「 だったのかfirstName、それともだったのか?」と疑問に思うことはありません。キャメル ケースの方が好みですか? では、キャメル ケースに限定し、ハイフンやアンダースコアは使用せず、常に一貫して最初の文字に大文字または小文字を使用し、混在させないでください。FirstNamefirst_name
今ではあまり知られていない問題として、少なくとも1つのブラウザ、Netscape 6がID 属性値を大文字と小文字を区別するものとして誤って処理しましたつまり、id="firstName"HTML (小文字の「f」) と#FirstName { color: red }CSS (大文字の「F」) に入力した場合、バグのあるブラウザでは要素の色を赤に設定できなかったことになります。この編集の時点 (2015 年 4 月) では、Netscape 6 のサポートを求められてはいないと思います。これは歴史的な脚注と考えてください。