Close
nav-leftプロパティは、左方向キーにフォーカス移動を割り当てる際に使用します。
方向入力に反応してフォーカスが当たる要素が決定されます。
nav-leftプロパティが、キーボードの“左方向キー”に対応するのは、一般的なパソコンの場合です。
使用するデバイスによって方向ナビゲーションの入力方法は異なります。
フォーカス移動を割り当てる要素には、id属性で識別子（id名）を付けます。
同時にnav-leftプロパティの値に#を付けたid名を指定することで、
どの要素からどの要素にフォーカス移動するのかを関連付けます。
例えば、id=”xxx1″の要素からid=”xxx2″の要素に移動させる場合、
<E id=”xxx1″> と指定した要素に E#xxx1 {nav-left:#xxx2;} というスタイルを適用します。
ターゲット名を指定すると、フォーカスするターゲットフレームを指定することができます。
ターゲット名に current を指定すると現在のフレームがターゲットになります。
また、ターゲット名に root を指定するとウィンドウ全体がターゲットになります。
ターゲット名はアンダースコア（ _ ）以外で始まる文字列でなくてはなりません。
指定された名前のターゲットフレームが存在しない場合には、ターゲット名に current が指定されたのと同じになります。
以下のサンプルでは、画面上のボタンの配置順に関係無く、
上・右方向キーを押すと数字が大きいものに、
また、下・左方向キーを押すと数字が小さいものに順番にフォーカス移動するように指定しています。
まだ、サポートしているブラウザが限られていますが、
Operaでは、キーボードの[shiftキー]＋[左方向キー]を押すことで動作が確認できるかと思います。
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>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<form action=”xxx.php” method=”post”>
<input id=”b0″ type=”button” value=”0″>
<input id=”b9″ type=”button” value=”9″>
<input id=”b1″ type=”button” value=”1″>
<input id=”b8″ type=”button” value=”8″>
<input id=”b2″ type=”button” value=”2″>
<input id=”b7″ type=”button” value=”7″>
<input id=”b3″ type=”button” value=”3″>
<input id=”b6″ type=”button” value=”6″>
<input id=”b4″ type=”button” value=”4″>
<input id=”b5″ type=”button” value=”5″>
</form>
</body>
</html>
どのカジノが自分に最適か分からないですか?
