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

CSSのnav-leftプロパティとは？矢印キーでのフォーカス移動を制御する方法とサンプルコード

nav-leftプロパティとは

nav-leftプロパティは、テンレビリモコンやキーパッドなどのデバイスで左矢印ボタンが押されたときに、フォーカスをどの要素へ移動させるかを指定するためのCSSプロパティです。

通常のマウス操作ではあまり意識されませんが、スマートTVやセットトップボックスのようにリモコンの方向キーでUIを操作する環境では、フォーカスの移動順序を明示的に制御することが重要になります。nav-leftを使えば、「左ボタンを押したら必ずこの要素へ移動する」という挙動を実現できます。

基本構文

nav-left: auto | <id> | current | root;
  • auto：ブラウザが自動的に移動先を判断します（初期値）。
  • <id>：#btn1 のように、移動先要素のIDを指定します。
  • current / root：それぞれ現在の要素、ルート要素への移動を指定します。

なお、nav-leftはCSS Basic User Interface Moduleで定義されており、対応ブラウザが限られている点には注意が必要です。

実装例：4つのボタン間を矢印キーで移動する

以下のコードでは、画面上に配置した4つのボタンに対してnav-left・nav-right・nav-up・nav-downを設定し、方向キーでフォーカスが循環するようにしています。実際に動かして、nav-leftによる左方向へのフォーカス移動を確認してみてください。

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        position: absolute;
      }
      button#btn1 {
        top: 10%;
        left: 15%;
        nav-index: 1;
        nav-right: #btn2;
        nav-left: #btn4;
        nav-down: #btn2;
        nav-up: #btn4;
      }
      button#btn2 {
        top: 30%;
        left: 30%;
        nav-index: 2;
        nav-right: #btn3;
        nav-left: #btn1;
        nav-down: #btn3;
        nav-up: #btn1;
      }
      button#btn3 {
        top: 50%;
        left: 15%;
        nav-index: 3;
        nav-right: #btn4;
        nav-left: #btn2;
        nav-down: #btn4;
        nav-up: #btn2;
      }
      button#btn4 {
        top: 30%;
        left: 0%;
        nav-index: 4;
        nav-right: #btn1;
        nav-left: #btn3;
        nav-down: #btn1;
        nav-up: #btn3;
      }
    </style>
  </head>
  <body>
    <button id = "btn1">Result1</button>
    <button id = "btn2">Result2</button>
    <button id = "btn3">Result3</button>
    <button id = "btn4">Result4</button>
  </body>
</html>

まとめ

  • nav-leftは、左矢印キーが押された際のフォーカス移動先を指定するプロパティ。
  • リモコンや方向キーで操作するTV向けアプリなどのUIで特に有用。
  • nav-right・nav-up・nav-downと組み合わせることで、直感的なナビゲーションを実現できる。
  • ブラウザ対応が限定的なため、利用時は対象環境の確認が必要。
  1. 【CSS】font-size-adjustプロパティの使い方｜フォールバック時の可読性を維持する方法

    CSSのfont-size-adjustプロパティは、フォントフォールバック（指定したフォントが利用できない環境で代替フォントへ切り替わること）が発生した際にも、テキストの可読性を維持するために使用されます。本記事では、その基本的な仕組みと実装例をコード付きで解説します。 font-size-adjustプロパティとは Webページで指定したフォントがユーザーの端末にインストールされていない場合、ブラウザは自動的に代替フォントで表示します。しかし、フォントごとに文字の大きさやx-height（小文字「x」の高さ）の比率が異なるため、同じfont-sizeを指定していても、実際に表示される文字

  2. CSSでleftプロパティをアニメーションさせる方法

    CSSでleftプロパティをアニメーションさせたい場合は、@keyframesルールとanimationプロパティを組み合わせることで実現できます。要素をスムーズに横方向へ移動させる演出などに活用できる基本的なテクニックです。 leftプロパティをアニメーションさせる際のポイント leftプロパティは、要素がposition: absolute;やposition: relative;などの位置指定を行っている場合にのみ有効になります。そのため、アニメーション対象の要素には必ずpositionの設定を忘れずに行いましょう。 サンプルコード 以下のコードでは、5秒間のアニメーションを使用して、要