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

HTMLのid属性とは？基本ルールと実践的なサンプルコードを解説

HTMLのid属性とは

HTMLのid属性は、ページ内の特定の要素に一意の識別子（ユニークなID）を割り当てるための属性です。この識別子を利用することで、CSSによるスタイル適用や、JavaScriptによる要素の操作を、その要素だけに限定して行うことができます。

重要なルールとして、1つのHTMLページ内で同じidを複数の要素に付けることはできません。idは必ずページ内で一意である必要があります。また、CSSやJavaScriptからidを参照する際には、先頭にハッシュ記号（#）を付けます。

id属性の主な用途

  • CSSでのスタイリング：「#id名」セレクタを使って、特定の要素のみにスタイルを適用できます。
  • JavaScriptでの操作：document.getElementById()メソッドを使って、該当する要素を取得し、動的に内容を変更したりイベント処理を行ったりできます。
  • ページ内リンク：「#id名」へのアンカーリンクを作成し、ページ内の特定位置へジャンプさせることができます。

注意： HTML5以降では、数字で始まるidも指定できるようになりました。ただし、CSSセレクタで扱いやすくするため、英字で始まるidを使用することが一般的に推奨されています。

id属性の使用例

以下は、id属性を使ってマウスイベント処理を実装したサンプルです。idで指定した各要素に対して、CSSでスタイルを適用しつつ、JavaScriptのgetElementById()で要素を取得してゲームのようなインタラクションを実現しています。

<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   #outer {
      width:70%;
      margin: 0 auto;
      padding: 0;
      text-align: center;
      border:1px solid black;
      height: 105px;
      background-color: #28a745;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   #upper {
      border-bottom: 1px solid black;
      height: 40px;
      margin: 0 0 15px 0;
      background-color: #DC3545;
   }
   #lower {
      border-top: 1px solid black;
      height: 40px;
      margin: 15px 0 0 0;
      background-color: #DC3545;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-clientX</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" onclick="gameStart()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById('divDisplay');
   var gameDisplay = document.getElementById('outer');
   function playGame(event) {
      var x = event.clientX;
      var y = event.clientY;
      if(y > 95 &amp;&amp; y < 110){
         divDisplay.textContent = 'Keep Going!';
         if(x === 439){
            divDisplay.textContent = 'Congrats! You Did it!';
            gameDisplay.removeEventListener('mousemove', playGame);
         }
      } else {
         divDisplay.textContent = 'You moved to DANGER area. You loose!';
         gameDisplay.removeEventListener('mousemove', playGame);
      }
   }
   function gameStart(){
      gameDisplay.addEventListener('mousemove',playGame);
   }
</script>
</body>
</html>

このコードでは、「outer」「upper」「lower」「start」「divDisplay」という5つのidが使われています。CSSでは「#outer」のようにセレクタを指定してスタイルを定義し、JavaScriptではgetElementById('outer')のように要素を参照しています。

実行結果

上記のコードを実行すると、以下のような出力が得られます。

1) 「Start」ボタンをクリック後、カーソルが緑色（安全）エリアにある場合：

HTMLのid属性とは？基本ルールと実践的なサンプルコードを解説

2) 「Start」ボタンをクリック後、カーソルが緑色（安全）エリアの端にある場合：

HTMLのid属性とは？基本ルールと実践的なサンプルコードを解説

3) 「Start」ボタンをクリック後、カーソルが赤色（危険）エリアに入った場合：

HTMLのid属性とは？基本ルールと実践的なサンプルコードを解説

まとめ

id属性は、HTML要素に一意の名前を与えるための基本的かつ重要な仕組みです。CSSでのピンポイントなスタイル指定、JavaScriptによるDOM操作、ページ内リンクなど、Web開発のさまざまな場面で活用されます。「ページ内で重複しない」「#で参照する」という2つのポイントを押さえておきましょう。

  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以