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

CSSのnav-rightプロパティとは?使い方とサンプルコードを解説

nav-rightプロパティとは

CSSのnav-rightプロパティは、キーボードの右矢印キー(→)が押されたときに、フォーカスをどの要素へ移動させるかを指定するためのプロパティです。テレビのリモコンやゲームコントローラーのような方向キー操作を想定したデバイス向けのナビゲーションを実現するために用意されたもので、CSS3で提案された「CSS Basic User Interface Module」に含まれています。

このプロパティを使うことで、画面上の配置に関係なく、フォーカスの移動順序を自由に制御できます。特にリモートコントロールでの操作が前提となるスマートTV向けアプリケーションなどで役立ちます。

指定できる値

nav-rightプロパティには、以下のような値を指定できます。

  • auto:ブラウザが自動的にフォーカス移動先を決定します(初期値)。
  • <id>:フォーカス移動先の要素のIDを「#btn1」のように指定します。
  • <target-name>:フレームなどのターゲット名を指定します。

nav-rightプロパティの使用例

以下のコードでは、4つのボタンを配置し、それぞれにnav-right・nav-left・nav-up・nav-downプロパティを設定することで、矢印キーによるフォーカス移動の順序を定義しています。実際に動作を確認してみてください。

<!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>

コードの解説

この例では、各ボタンに対して以下のように設定しています。

  • position: absolute:ボタンを絶対配置し、top・leftで画面上の位置を指定しています。
  • nav-index:フォーカスの移動順序(タブオーダー)を示す番号です。
  • nav-right / nav-left / nav-up / nav-down:それぞれ右・左・上・下の矢印キーが押されたときのフォーカス移動先の要素IDを指定しています。

たとえば「Result1」ボタン(btn1)では、「nav-right: #btn2」と指定されているため、btn1にフォーカスがある状態で右矢印キーを押すと、フォーカスはbtn2(Result2)へ移動します。

対応ブラウザに関する注意点

nav-rightプロパティは実験的な機能として提案されたものであり、現在の主要ブラウザ(Chrome、Firefox、Safari、Edge)では標準的にサポートされていません。過去にはOperaなど一部の環境でサポートされていたことがあります。そのため、本番環境での利用は避け、一般的なWebサイトではTabキーによるフォーカス移動やJavaScriptによる独自実装を検討するのが安全です。

  1. 【CSS】font-size-adjustプロパティの使い方｜フォールバック時の可読性を維持する方法

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

  2. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>