HTML/idとclass

idとclassの基本

HTMLにおいて、idとclassは要素に付与される重要な属性です。これらの属性は、CSSやJavaScriptを使って要素を識別し、スタイルを適用したり、操作したりする際に役立ちます。

• id: 要素に一意の識別子（ID）を付与します。同一のHTML文書内であれば、それぞれの要素に対して一意でなければなりません。例えば、ページ内の特定のセクションや特定の要素を識別するのに使用されます。

<div id="header">
    <!-- ヘッダーのコンテンツ -->
</div>

<p id="intro">
    <!-- イントロダクションのコンテンツ -->
</p>

• class: 複数の要素に同じクラス名を付与することができます。クラスは要素をグループ化し、共通のスタイルや動作を適用する際に使用されます。

<ul>
    <li class="nav-item"><a href="#">ホーム</a></li>
    <li class="nav-item"><a href="#">商品</a></li>
    <li class="nav-item"><a href="#">お問い合わせ</a></li>
</ul>

idとclassの使い分け

• idの用途
  • ページ内の特定の要素を一意に識別する場合に使用します。
  • CSSやJavaScriptで特定の要素に対して直接スタイルを適用したり、操作したりする際に有効です。
  • ページ内リンク（アンカー）で特定の位置にジャンプするために使用されることがあります。
• classの用途
  • 複数の要素に同じスタイルや動作を適用する場合に使用します。
  • 複数の要素をグループ化してスタイルシートで一括してスタイルを設定する際に便利です。
  • JavaScriptでクラスを操作して、特定の動作を複数の要素に一括で適用することができます。

CSSでidとclassを利用する

CSSを使ってidやclassを活用すると、ページのスタイルを管理しやすくなります。

• idのCSS適用例

  #header {
      background-color: #333;
      color: #fff;
      padding: 10px;
  }
  

• classのCSS適用例

  .nav-item {
      display: inline-block;
      margin-right: 10px;
  }
  

JavaScriptでidとclassを利用する

JavaScriptを使ってidやclassを操作することで、動的なページの作成や操作が可能になります。

• idを使ったJavaScriptの例

  // idが"submit-btn"のボタンをクリックした時の処理
  document.querySelectorAll("#submit-btn").addEventListener("click", function() {
    // フォームの内容を送信するなどの処理を記述
  });
  

• classを使ったJavaScriptの例

  // クラスが"accordion"の要素を取得して処理を行う例
  const accordions = document.querySelectorAll(".accordion");
  for (let i = 0; i < accordions.length; i++) {
    accordions[i].addEventListener("click", function() {
      // アコーディオンの開閉処理などを記述
    });
  }
  

まとめ

• idとclassはHTML要素に付与することで、スタイリングやJavaScriptでの操作を容易にします。
• idは一意の識別子を、classは複数の要素をグループ化するために使用します。
• CSSやJavaScriptで効果的に利用することで、柔軟でメンテナンスしやすいHTML文書を作成することができます。

この章を参考にして、HTML文書におけるidとclassの使い方を学び、効果的に活用してください。