HTML スコープ属性の徹底解説! 見出しとラベルの対象範囲をマスターしよう
HTML 属性のスコープ属性について
th要素におけるスコープ属性
th
要素におけるスコープ属性は、表の見出しセルがどのセルと関連しているかを指定します。
使用可能な値
row
: 見出しセルが同じ行のセルを対象とするcol
: 見出しセルが同じ列のセルを対象とする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
属性を指定することで、"名前"という見出しと"山田太郎"、"佐藤花子"というラベルを関連付けることができます。
スコープ属性は、見出しやラベルの対象範囲を指定するために便利な属性ですが、古いブラウザではサポートされていない場合があります。
上記の代替方法を使用することで、古いブラウザでも見出しやラベルの対象範囲を正しく指定することができます。
これで完璧!HTMLのwrap属性で実現する、見やすく使いやすいテキストエリア
wrap 属性は、textarea 要素で使用され、テキストエリア内のテキストが折り返される際の挙動を制御します。属性値hard: テキストが折り返された際に、改行コード (\n) を挿入します。soft: テキストが折り返された際に、改行コードは挿入せず、スペースで折り返します。
target属性を使いこなして、ユーザー体験を向上させる
属性値target属性には、以下の属性値を指定できます。_blank:新しいウィンドウまたはタブでリンク先を開きます。_self:現在のフレームまたはウィンドウでリンク先を開きます。_parent:親フレームでリンク先を開きます。_top:最上位のフレームでリンク先を開きます。
スロットの代替方法:ネスト構造、content属性、JavaScript
スロットを持つ要素:<slot>要素またはslot属性を持つ要素コンテンツを挿入する要素:<template>要素内に配置された要素スロットを持つ要素は、コンテンツの挿入場所を指定します。一方、コンテンツを挿入する要素は、実際に挿入するコンテンツを定義します。
HTML Elements の "title" 要素の完全ガイド | SEO対策もバッチリ
HTML Elements の "title" 要素は、Web ページのタイトルを設定するための要素です。これは、ブラウザのタブや検索結果リストに表示されるタイトルとして使用されます。また、スクリーンリーダーなどの支援技術によって読み上げられるため、アクセシビリティの観点からも重要な要素です。
スロットの代替方法:ネスト構造、content属性、JavaScript
スロットを持つ要素:<slot>要素またはslot属性を持つ要素コンテンツを挿入する要素:<template>要素内に配置された要素スロットを持つ要素は、コンテンツの挿入場所を指定します。一方、コンテンツを挿入する要素は、実際に挿入するコンテンツを定義します。
HTMLのabbr要素で略語を分かりやすく表示する方法
abbr 要素は、HTML文書内で略語や頭字語を定義するために使用されます。略語の意味をツールチップやポップアップで表示することで、ユーザーの理解を促進します。属性title: 略語の意味を説明するテキストを指定します。class: スタイルシートでスタイルを指定するために使用します。
inputmode属性を使いこなして、ユーザー体験を向上させる
inputmode属性は、以下の役割を果たします。適切なキーボードの表示: 入力欄の種類に応じて、数字キーボード、テンキー、音声入力など、最適なキーボードを表示することができます。入力補助機能の提供: ブラウザは、入力欄の種類に応じて、自動補完、スペルチェック、予測変換などの入力補助機能を提供することができます。
HTML media属性でメディアに応じたスタイルシートを適用する方法
media属性 は、link要素 と style要素 の両方で使用できます。link要素 で使用する場合、media属性 は外部スタイルシートの適用対象となるメディアを指定します。例えば、以下のコードは、画面表示用のスタイルシートと印刷用のスタイルシートを指定します。
まとめ:HTML要素「rp」を使いこなして、ユーザーフレンドリーなページを作ろう!
HTML要素「rp」は、ルビに対応していないブラウザで表示される代替テキストを指定するために使用されます。ルビとは、漢字などの難読文字に読み仮名をふりがなで表示する機能です。役割「rp」要素は、主に以下の役割を果たします。ルビに対応していないブラウザで、漢字などの読み仮名を代替テキストとして表示する