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

CSSのnav-downプロパティとは？使い方とサンプルコードをわかりやすく解説

CSSのnav-downプロパティは、キーボードやリモコンの「下矢印キー」が押されたときに、フォーカスをどの要素へ移動させるかを指定するためのプロパティです。主にテレビ向けブラウザやゲーム機など、方向キーで操作するデバイス上でのナビゲーション制御に活用されます。

nav-downプロパティの基本構文

nav-down: auto | id | target-name | initial | inherit;
  • auto：ブラウザが自動的に次の移動先を決定します（初期値）。
  • id：移動先の要素IDを「#btn2」のように指定します。
  • target-name：移動先フレームのターゲット名を指定します。
  • initial / inherit：それぞれ初期値・親要素からの継承を設定します。

実装例

以下のコードでは、4つのボタンを配置し、nav-downプロパティを使って下矢印キー押下時のフォーカス移動先を定義しています。同様にnav-up・nav-left・nav-rightも組み合わせることで、十字キーによる直感的な操作を実現できます。

<!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-downプロパティはCSS3のBasic User Interfaceモジュールで定義されていますが、現時点で主要なPC向けブラウザ（Chrome・Firefox・Safari・Edge）ではサポートされていません。実際に動作確認できるのは、Opera TVブラウザなど一部の組み込み環境に限られます。そのため、一般的なWebサイトでの使用は避け、スマートTV向けアプリなど特殊な環境でのみ採用するのが望ましいでしょう。

  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>