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

HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

HTMLのtabindex属性は、HTMLドキュメント内の要素がTabキーでフォーカスされる順序（タブ移動の順番）を定義するための属性です。tabindexはグローバル属性に分類されるため、すべてのHTML要素に対して使用することができます。

通常、Tabキーを押すと要素はHTMLの記述順にフォーカスされますが、tabindex属性を指定することで、この順序を自由にコントロールできます。値には整数を指定し、数値が小さいものから順にフォーカスされます。

tabindex属性の値について

  • 正の数（1以上）：指定した数値の順序でタブ移動が行われます
  • 0：HTMLの記述順にフォーカスされます（デフォルトの挙動に組み込まれます）
  • 負の数（-1）：Tabキーによるフォーカス対象から除外されます（JavaScriptからのフォーカスは可能）

構文

tabindex属性の基本的な構文は以下のとおりです。

<tagname tabindex="number"></tagname>

サンプルコード

ここでは、HTMLのtabindex属性を使った具体的な例を見てみましょう。以下のコードでは、5つの段落（p要素）に異なるtabindexの値を設定しています。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
    p {
        font-size: 1.2rem;
    }
</style>
<body>
<h1>HTML tabindex Attribute</h1>
<p tabindex="5">I'm paragraph.</p>
<p tabindex="4">I'm paragraph.</p>
<p tabindex="3">I'm paragraph.</p>
<p tabindex="2">I'm paragraph.</p>
<p tabindex="1">I'm paragraph.</p>
<p>Now, try to navigate through paragraph using tab key</p>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のようになります。

HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

この状態でTabキーを押してみてください。HTMLの記述順ではなく、tabindex属性で指定した数値の順序（1 → 2 → 3 → 4 → 5）に従って、段落がフォーカスされていきます。

HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

まとめ

tabindex属性を使うことで、Tabキーによるフォーカス移動の順序を柔軟に制御できます。ただし、安易に正の値を多用すると、キーボード操作の予測可能性が損なわれ、アクセシビリティの低下につながる場合があります。特別な理由がない限りは、HTMLの記述順に従うか、tabindex="0"や負の値を適切に活用することが推奨されています。

  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属性の使用例以