nav-up－CSS3リファレンス

★CSS3リファレンス

nav-up …… 上方向キーにフォーカス移動を割り当てる
※サポートされているブラウザは現在調査中です。 Opera10

nav-upプロパティは、上方向キーにフォーカス移動を割り当てる際に使用します。方向入力に反応してフォーカスが当たる要素が決定されます。

nav-upプロパティが、キーボードの“上方向キー”に対応するのは、一般的なパソコンの場合です。使用するデバイスによって方向ナビゲーションの入力方法は異なります。

フォーカス移動を割り当てる要素には、id属性で識別子（id名）を付けます。同時にnav-upプロパティの値に#を付けたid名を指定することで、どの要素からどの要素にフォーカス移動するのかを関連付けます。例えば、id="xxx1"の要素からid="xxx2"の要素に移動させる場合、 <E id="xxx1"> と指定した要素に E#xxx1 {nav-up:#xxx2;} というスタイルを適用します。

ターゲット名を指定すると、フォーカスするターゲットフレームを指定することができます。ターゲット名に current を指定すると現在のフレームがターゲットになります。また、ターゲット名に root を指定するとウィンドウ全体がターゲットになります。ターゲット名はアンダースコア（ _ ）以外で始まる文字列でなくてはなりません。指定された名前のターゲットフレームが存在しない場合には、ターゲット名に current が指定されたのと同じになります。

■値

auto: 方向ナビゲーションの入力に反応して、ユーザエージェントが自動的にフォーカスを移動する要素を決定する（初期値）
ID名: id名でフォーカスを移動する要素を指定する
inherit: 親要素の値を継承する

■初期値・適用対象・値の継承

初期値: auto
適用対象: すべての適用可能な要素
値の継承: しない

以下のサンプルでは、画面上のボタンの配置順に関係無く、上・右方向キーを押すと数字が大きいものに、また、下・左方向キーを押すと数字が小さいものに順番にフォーカス移動するように指定しています。

まだ、サポートしているブラウザが限られていますが、 Operaでは、キーボードの[shiftキー]＋[上方向キー]を押すことで動作が確認できるかと思います。

■使用例

CSSソースは外部ファイル（sample.css）に記述

input#b0 {nav-up:#b1; nav-down:#b9; nav-right:#b1; nav-left:#b9;}
input#b1 {nav-up:#b2; nav-down:#b0; nav-right:#b2; nav-left:#b0;}
input#b2 {nav-up:#b3; nav-down:#b1; nav-right:#b3; nav-left:#b1;}
input#b3 {nav-up:#b4; nav-down:#b2; nav-right:#b4; nav-left:#b2;}
input#b4 {nav-up:#b5; nav-down:#b3; nav-right:#b5; nav-left:#b3;}
input#b5 {nav-up:#b6; nav-down:#b4; nav-right:#b6; nav-left:#b4;}
input#b6 {nav-up:#b7; nav-down:#b5; nav-right:#b7; nav-left:#b5;}
input#b7 {nav-up:#b8; nav-down:#b6; nav-right:#b8; nav-left:#b6;}
input#b8 {nav-up:#b9; nav-down:#b7; nav-right:#b9; nav-left:#b7;}
input#b9 {nav-up:#b0; nav-down:#b8; nav-right:#b0; nav-left:#b8;}

HTMLソース

↓↓↓

★CSS3リファレンス

■値

■初期値・適用対象・値の継承

■使用例

CSSソースは外部ファイル（sample.css）に記述

HTMLソース

ブラウザ上の表示

Sponsors