HTML
⌨️ tabindex の順序が期待通りにならない
tabindexの順序が期待通りにならない
😰 こんな症状
tabindexで順序を指定したのにTab移動が期待通りにならない。正の値は避けて0か-1を使おう。
🔍 原因
tabindexに正の値（1, 2, 3...）を使うと、DOM順序ではなくtabindex値の昇順でフォーカスが移動するよ。複雑になりやすく、後から要素を追加すると順序が崩れる。
❌ エラーが起きるコード
<button tabindex="3">3番目</button>
<button tabindex="1">1番目</button>
<button tabindex="2">2番目</button>
<!-- DOM順と異なる順序でフォーカスが移動 -->✅ 直し方
1. tabindex='0'を使う（DOM順序でフォーカス）。 2. tabindex='-1'でフォーカス対象から外す。 3. 正の値は使わず、HTML構造の順序で制御する。
✅ 修正後のコード
<!-- tabindex=0でDOM順序通りにフォーカス -->
<button tabindex="0">1番目</button>
<button tabindex="0">2番目</button>
<button tabindex="0">3番目</button>この解決法は役立ちましたか？
🔗 関連するエラー
- imgのalt属性エラー — alt属性が書かれていない
- lang属性の未設定 — html要素にlang属性がない
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説