HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで要素に一意のIDを指定する方法｜id属性の基本と使い方

HTMLで特定の要素に一意のIDを割り当てるには、id属性を使用します。id属性は、ページ内の1つの要素だけを識別するためのもので、CSSでのスタイル指定や、JavaScriptによる動的な操作に広く活用されています。

id属性の基本的なルール

id属性を使う際は、以下のポイントに注意しましょう。

  • IDは同じページ内で重複してはいけません（必ず一意である必要があります）。
  • ID名には英数字・ハイフン（-）・アンダースコア（_）などが使用でき、先頭は文字から始めるのが安全です。
  • 大文字と小文字は区別されるため、「myId」と「myid」は別のIDとして扱われます。

実装例：id属性を使ったサンプルコード

次のコードは、<p>要素に「myid」というIDを指定し、ボタンをクリックするとJavaScriptのgetElementById()メソッドを使ってその要素のテキストを書き換える例です。

<html>
   <body>
      <h1>Tutorialspoint</h1>
      <p id = "myid">We provide Tutorials!</p>
      <button onclick="display()">More...</button>
      <script>
         function display() {
            document.getElementById("myid").innerHTML = "We provide learning videos as well";
         }
      </script>
   </body>
</html>

コードの解説

<p id="myid"> の部分で段落要素に「myid」というIDを付与しています。ボタンがクリックされると display() 関数が呼び出され、document.getElementById("myid") によって該当の要素が取得され、innerHTML プロパティ経由で表示内容が新しいテキストに置き換えられます。

id属性とclass属性の違い

初心者が混同しやすい点として、id属性とclass属性の違いがあります。

  • id属性：ページ内で1つの要素のみに使用できる一意の識別子。
  • class属性：複数の要素に同じクラス名を付けて、まとめてスタイルや操作を適用できる。

単一の要素をピンポイントで操作したい場合はid属性を、複数要素に共通のデザインを適用したい場合はclass属性を使うのが基本です。

  1. HTMLで要素を読み取り専用にする方法｜readonly属性の使い方を解説

    HTMLのフォーム要素を読み取り専用（編集不可）に設定するには、readonly 属性を使用します。この属性が指定された入力フィールドは、ユーザーが内容を書き換えることができなくなりますが、値はフォーム送信時にサーバーへ引き続き送信されます。 readonly属性の基本例 以下のコードでは、テキスト入力欄に readonly 属性を設定し、ユーザーが値「Amit」を編集できないようにしています。 <!DOCTYPE html> <html>    <body>       <h2>ログイン<

  2. HTMLのselect要素で表示されるオプションの数を指定する方法

    HTMLの<select>要素で同時に表示される選択肢（オプション）の数を指定するには、size属性を使用します。通常、<select>要素はクリックすると選択肢が展開されるドロップダウン形式で表示されますが、size属性に数値を設定すると、その数だけの選択肢が常に表示されるリストボックス形式に変わります。例えば「size=5」と指定すれば、5つの選択肢が一度に画面上に表示されます。コード例以下のコードは、size属性を使って表示されるオプションの数を5つに設定した実装例です。実際にブラウザで実行して動作を確認してみてください。<!DOCTYPE html>