HTMLのidとは?使い方やclassとの違いについても解説

HTMLのidの意味がよくわからない
HTMLのidの使い方について知りたい
classとidの違いがよくわからない

HTMLを始めたばかりの初学者にとっては覚えるべきタグがいっぱいありすぎて、どのタグにどんな意味があるのか、いまいちわからない方も多いのではないでしょうか?

HTMLの中で、id=”sidebar”のような表記を見たことはありませんか?idはCSSJavaScriptなどを扱うときにも出てくるキーワードで、どのようなものなのか分からない初心者の方も多いと思います。

そこで、今回はHTMLのidとは何かについて、意味や使い方について解説をしていきます。

  • idとは
  • idの使い方
  • idを使うべきところ
  • classとidの違い

HTMLのidについて、基本からやさしく解説していくのでぜひご覧ください。

HTMLのidとは

それではidとは何かを解説していきます。idはHTMLのタグに設定できる属性として用意されています。そしてこのidを目印にして、CSSやJavaScriptで装飾やさまざまなプログラムを実行させます。

idはclassとは違って、1つのページに同じ名前のidを一つだけ設定させることが出来ます。

HTMLのidの使い方

それではidの使い方について見ていきましょう。こちらのコードをご覧ください。

実行結果

ここではh1タグが付いているタイトルとなる部分に対して、idをつけました。ページそのもののタイトルは1つであるべきなので、制約がなければここではidを使うべきです。

また、セレクタの指定方法もclassのときの「.」とは違い、「#」で指定されているのが分かると思います。ちなみに、idはclassよりも優先順位が高いという特徴もあります。こちらのコードをご覧ください。

実行結果

page-titleというidと、blueというclassが同じ要素に対して設定されていますが、実行結果を見てみるとタイトルは赤、つまりidが優先されていることが分かりますね。以上が基本的なidの使い方になります。

HTMLのidを使うべきところ

ここまでも簡単に解説してきましたが、ページ内に同じ名前のidは一つしか設定することが出来ません。そのため、同じスタイルを繰り返して適用したい本文などではidは使うべきではありません。

先ほどのページタイトルのように、ナビゲーションバーやサイドバー、ヘッダーやフッターなど、ページに一つしか無くても良いような要素に対して、idを使っていきましょう。

classとidの違い

classとidは、複数回同じ名前のものを使える(class)か、使えない(id)かが大きな違いになります。そのような場合全部をclassで指定してレイアウトを作っていけば良いと思う方もいるかもしれません。

実際にはidを使わずにclassだけを使ってCSSを書いていく手法もあります。ただし、先程解説したように、idはclassよりもCSSが適用される優先順位が高いという特徴もあります。

細かなレイアウトではなく、大まかなレイアウトを決めるとき、idを振り分けておくとCSSも読みやすいものになります。

まとめ

この記事ではHTMLで使われるidについて、簡単な使い方からclassとの違いについてを解説してきました。idについては分かって頂けたでしょうか? classは同じ名前のものを複数回、idは1回だけ使うことが出来るということを覚えておきましょう。

最短でプログラミングを習得したい方へ

元々ITリテラシーのある方やプログラムの学び方がわかっている方は独学で習得することも可能でしょう。

ただし、実際の学習期間中はつまづいている時間がほとんどです。

「もう挫折したくない」
「本業と両立しながら、好きな時間で自分のペースで勉強を続けていきたい。」
「自分だけのカリキュラムで効率的に勉強したい」

そんな方はお気軽に侍エンジニア塾までご相談ください。

弊社では、

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

までをひと通り学習できます。

まずは無料体験レッスンで、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

挫折しない学び方や、通常1000時間以上かかる学習時間を1/3にする方法などより具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta1

LINEで送る
Pocket

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説