HTMLで一つのタグにidを複数使う方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLで一つのタグにidを複数使う方法について解説しています。最初に、属性に属性値(任意の名前)をつけることができるid属性とclass属性の基本、それぞれの使い方と違いについて説明します。次にidを複数使う場合の適用のルールを学習しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

HTMLで一つのタグにidを複数使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

一つのタグにidを複数使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

同一のid名はHTMLファイルの中で1回しか登場しない

HTMLではid属性をつけることで要素の識別をすることが出来るようになります。ひとつのHTMLファイルに対して同じid名を用いることはできません。
idはp要素やdiv要素などどのような要素にもマークアップすることができ、そのファイル内で1回だけしか適用しないCSSルールなどがある場合にはid要素を用いることが有効です。

 

idとclassの使い分け

要素の識別のために利用するものにはid属性の他にclass属性があります。class属性はid属性とは違い、同じCSSや同じJavaScriptの適用を繰り返して使う場合に用いることができる要素です。
使い回すフォントや色のなどのCSSのルールはclassを用いることで、後の修正などの管理がしやすくなります。実際にはidを一切使わず、classのみで記述されているwebサイトも多く見受けられます。
classを使用している場合に一部分だけの要素にCSSを適用したい場合には、classよりもidの方が抽象度が低く優先されるので、class属性とid属性を併用することで便利に利用ができます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

idを複数使う場合

 同じidを複数回使ってしまうと基本的には最初の方に記述した要素に適用されてしまいます。CSSでは同じidでも表示出来てしまう場合がありますが、idを取得して利用するJavaScriptでは最初の要素のみを取得して動作することになります。
例えばp要素の1行ごとにid属性を適用した場合でもCSSファイルの方でまとめてCSSルールを適用することができます。1行ごとに色は変えたいがフォントサイズは同じにしたいときなどは、それぞれ別名のid名を付けてマークアップしCSSファイルではそれぞれのidセレクタでcolor指定し、フォントはidセレクタ名をまとめて併記することで一斉にfont指定をすることができます。
また、div要素の中にあるp要素に識別子を適用したい場合にdiv要素とp要素のそれぞれに違うid名を付けてマークアップをすることで抽象度の低い、より限定された指定をすることが出来るようになります。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。