HTML スコープ属性の徹底解説！ 見出しとラベルの対象範囲をマスターしよう

HTML 属性のスコープ属性について

th要素におけるスコープ属性

th要素におけるスコープ属性は、表の見出しセルがどのセルと関連しているかを指定します。

使用可能な値

• row: 見出しセルが同じ行のセルを対象とする
• colgroup: 見出しセルが同じcolgroup要素内のセルを対象とする
• thead: 見出しセルが同じthead要素内のセルを対象とする

使用例

<table>
  <thead>
    <tr>
      <th scope="col">名前</th>
      <th scope="col">年齢</th>
      <th scope="col">性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

上記の例では、thead要素内の最初のth要素にscope="col"属性を指定しています。

これは、"名前"という見出しが同じ列のすべてのセルに適用されることを意味します。

label要素におけるスコープ属性

label要素におけるスコープ属性は、ラベルがどのフォームコントロールと関連しているかを指定します。

使用可能な値

• form: ラベルが同じフォーム内のすべてのフォームコントロールを対象とする
• none: ラベルがどのフォームコントロールとも関連していないことを示す

使用例

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">

  <label for="age">年齢:</label>
  <input type="number" id="age" name="age">
</form>

上記の例では、nameラベルはnameというIDを持つinput要素と関連付けられています。

ageラベルはageというIDを持つinput要素と関連付けられています。

まとめ

スコープ属性は、表の見出しやフォームコントロールのラベルの対象範囲を明確にするために役立ちます。

スコープ属性のサンプルコード

th要素におけるスコープ属性

1 列方向の見出し

<table>
  <thead>
    <tr>
      <th scope="col">名前</th>
      <th>年齢</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

2 行方向の見出し

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th scope="row">年齢</th>
      <th scope="row">性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

上記は、th要素にscope="row"属性を指定することで、行方向の見出しを作成する例です。

3 グループ化

<table>
  <colgroup span="2">
    <col width="150">
  </colgroup>
  <colgroup>
    <col width="100">
  </colgroup>
  <thead>
    <tr>
      <th scope="colgroup">氏名</th>
      <th scope="col">名前</th>
      <th scope="col">年齢</th>
      <th scope="colgroup">性別</th>
      <th scope="col">性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田太郎</td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td>佐藤花子</td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

上記は、colgroup要素とth要素のscope属性を組み合わせて、列をグループ化する例です。

label要素におけるスコープ属性

1 フォーム内のすべてのフォームコントロールを対象

<form>
  <label scope="form">氏名:</label>
  <input type="text" name="name">
  <br>
  <label scope="form">年齢:</label>
  <input type="number" name="age">
</form>

上記は、label要素にscope="form"属性を指定することで、フォーム内のすべてのフォームコントロールを対象とするラベルを作成する例です。

2 特定のフォームコントロールを対象

<form>
  <label for="name">氏名:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="age">年齢:</label>
  <input type="number" id="age" name="age">
</form>

上記は、label要素にfor属性を指定することで、特定のフォームコントロールを対象とするラベルを作成する例です。

その他

1 スコープ属性の省略

th要素とlabel要素のscope属性は、省略可能です。

省略した場合、デフォルトの動作になります。

• th要素: scope="col"
• label要素: scope="none"

2 互換性

スコープ属性は、HTML5で導入されました。

古いブラウザでは、スコープ属性がサポートされていない場合があります。

古いブラウザとの互換性を考慮する場合は、for属性とid属性を併用することをおすすめします。

スコープ属性の代替方法

ここでは、スコープ属性の代替方法を紹介します。

id属性とfor属性を組み合わせることで、見出しやラベルとフォームコントロールを関連付けることができます。

例:

<table>
  <thead>
    <tr>
      <th id="name">名前</th>
      <th>年齢</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label for="name">山田太郎</label></td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td><label for="name">佐藤花子</label></td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

上記のように、th要素にid属性を、label要素にfor属性を指定することで、"名前"という見出しと"山田太郎"、"佐藤花子"というラベルを関連付けることができます。

JavaScriptを使用することで、動的に見出しやラベルの対象範囲を指定することができます。

例:

<script>
function setScope() {
  var labels = document.querySelectorAll("label");
  var inputs = document.querySelectorAll("input");

  for (var i = 0; i < labels.length; i++) {
    labels[i].setAttribute("for", inputs[i].id);
  }
}

window.onload = setScope;
</script>

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label>山田太郎</label></td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td><label>佐藤花子</label></td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

上記のように、JavaScriptを使用することで、label要素のfor属性を動的に設定することができます。

ARIA 属性は、アクセシビリティを向上させるために使用されます。

aria-labelledby属性とaria-describedby属性を使用することで、見出しやラベルとフォームコントロールを関連付けることができます。

例:

<table>
  <thead>
    <tr>
      <th aria-labelledby="name">名前</th>
      <th>年齢</th>
      <th>性別</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label id="name">山田太郎</label></td>
      <td>30歳</td>
      <td>男性</td>
    </tr>
    <tr>
      <td><label id="name">佐藤花子</label></td>
      <td>25歳</td>
      <td>女性</td>
    </tr>
  </tbody>
</table>

上記のように、th要素にaria-labelledby属性、label要素にid属性を指定することで、"名前"という見出しと"山田太郎"、"佐藤花子"というラベルを関連付けることができます。

スコープ属性は、見出しやラベルの対象範囲を指定するために便利な属性ですが、古いブラウザではサポートされていない場合があります。

上記の代替方法を使用することで、古いブラウザでも見出しやラベルの対象範囲を正しく指定することができます。