HTMLで一つのタグにidを複数使う方法を現役エンジニアが解説【初心者向け】
初心者向けにHTMLで一つのタグにidを複数使う方法について解説しています。最初に、属性に属性値(任意の名前)をつけることができるid属性とclass属性の基本、それぞれの使い方と違いについて説明します。次にidを複数使う場合の適用のルールを学習しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
nakamoto
HTMLで一つのタグにidを複数使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
一つのタグにidを複数使う方法について詳しく説明していくね！
お願いします！
同一のid名はHTMLファイルの中で1回しか登場しない
HTMLではid属性をつけることで要素の識別をすることが出来るようになります。ひとつのHTMLファイルに対して同じid名を用いることはできません。
つまり、今回のタイトルに有るHTMLで一つのタグにidを複数使うことはできないというのが文法上の決まりです。
同じ名称のidを複数回つかうデメリット
1つのhtmlファイルで同じidを複数回使ったり、一つのタグにidを複数使ってしまうと文法上のエラーになります。
そうは言っても、基本的には最初の方に記述した要素に適用されてしまいます。CSSでは同じidでも表示出来てしまう場合がありますが、idを取得して利用するJavaScriptでは最初の要素のみを取得して動作することになります。
例え同じidを指定してもhtmlの場合は、開発者ツールなど利用しない限り表示上エラーメッセージが出ることは有りません。
しかし、同じhtmlファイル内で、同じ名前のidを複数利用することは、文法上は間違った使い方になります。
htmlの文法上はエラーになる
htmlを表示しているだけではわかりませんが、開発者ツールなどでチェックするとhtmlの文法上はエラーになることが調査できます。
SEOでマイナス要因になる
見ている人からすると、htmlの文法上のエラー自体は気になりませんが、SEO上はマイナス要因になるので、同じhtmlファイルの中で同じ名称のidは1回だけしか利用しないという点は守ったほうが良いです。
複数人で開発する場合混乱する
複数人で開発する場合、同じ名前のidを用意すると、どのidが適用されているかわからなくなります。
そのため、単に表示上エラーがないからといって、同じ名前のidを複数個用意することは避けましょう。
表示状はエラーが出ませんが、開発者ツールなどでみると文法上はエラーになる実装です。
１つのhtmlファイルに複数のidを指定する
1つのhtmlファイル内に複数のidを指定することは、別の要素であれば文法上問題有りません。
divごとに複数のidを指定して色を変える
1つのhtmlファイル内に複数のidを指定する場合、たとえばdivごとに複数のidを指定して色を変えることが可能です。
html
<div id="num1">num1 <div id="num2">num2</div> <div id="num3">num3</div> <div id="num4">num4</div> </div>
css
#num1 {
color: green;
}
#num1 #num2{
color: red;
}
#num3 {
color: blue;
}
解説
<div id="num1">num1
に対して、次のcssが適用されています
#num1 {
color: green;
}
これによりnum1は緑色で表示されます。
id=”num1″で囲まれた
<div id="num2">num2</div>
に対して、次のcssが適用されています
#num1 #num2{
color: red;
}
これにより、num2が赤色になります。
<div id="num3">num3</div>
に対して、次のcssが適用されています
#num3 {
color: blue;
}
これにより、num3が青色になります。
<div id=”num4″>num4</div>
に対しては個別のcssは指定されていませんが、<div id=”num1″>num1で囲まれているため、次のcssが適用されます。
#num1 {
color: green;
}
結果的にnum1と同様に緑色になります。
実行結果
1つの要素に複数のidを指定するとエラーになる
1つのhtmlファイル内に複数のidを指定することはできますが、1つの要素に複数のidを指定するとエラーになります。
html
<div id="num1" id="num5">num1 <div id="num2">num2</div> <div id="num3">num3</div> <div id="num4">num4</div> </div>
css
#num1 {
color: green;
}
#num1 #num2{
color: red;
}
#num3 {
color: blue;
}
解説
実行結果では分かりませんが、htmlエラーをチェックするツールを利用すると、次のコードのid=”num5″の部分でエラーになることがわかります。
<div id="num1" id="num5">num1
エラーの内容はidが重複しているというエラーになります。
実行結果
idとclassの使い分け
要素の識別のために利用するものにはid属性の他にclass属性があります。
class属性はid属性とは違い、同じCSSや同じJavaScriptの適用を繰り返して使う場合に用いることができる要素です。
使い回すフォントや色のなどのCSSのルールはclassを用いることで、後の修正などの管理がしやすくなります。実際にはidを一切使わず、classのみで記述されているwebサイトも多く見受けられます。
すべてclassを利用して実装するデメリットは、チーム開発をする場合、すべてのページでこの要素は確実に決まった指定にしたい場合などは、idを利用するほうが効率的な実装に繋がります。
また、classを使用している場合に一部分だけの要素にCSSを適用したい場合には、classよりもidの方が抽象度が低く優先されるので、class属性とid属性を併用することで便利に利用ができます。
classを利用した実装例はこちらの記事を参考にしてみてくださいね。
コーディングの基礎！HTMLでdivタグを使う方法 | TechAcademyマガジン
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
