tabindexを設定しdivタグにフォーカスを当てる

html css

久々にHTMLを書いたら、いろいろなことを忘れていて非常に難儀した。
divタグにtabキーでフォーカスを当てられるようにしつつ、フォーカスの当たったdivタグをボーダーで囲むということをやったので今度は忘れないようにまとめておく。

まず、divタグにtabキーの操作でフォーカスが当てられるように「tabindex」を設定しておく必要がある。
さらにクラスを指定し、CSSでボーダーを表示できるようにする。
この時、「:focus」とすることでフォーカスが当たった場合に適用されるスタイルを定義することができる。

これらをまとめて、簡単なhtmlを書いてみた。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>フォーカスが当たったときにボーダーが表示される</title>
        <style>
            div.focus1:focus {border: medium solid red;}
            div.focus2:focus {border: medium solid blue;}
            div.focus3:focus {border: medium solid yellow;}
        </style>
    </head>
    <body>
        <div class="focus1" tabindex="1">focus1</div>
        <div class="focus2" tabindex="2">focus2</div>
        <div class="focus3" tabindex="3">focus3</div>
    </body>
</html>

今回は3つのdivタグを用意し、それぞれに個別のクラスを設定した。
ブラウザ上で確認すると、はじめは文字が表示されているだけだが、tabキーを押すと順番にフォーカスが当たり設定された色の枠で囲まれる。