トップページ  > CSS3  > nav-up

★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ソース

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

ブラウザ上の表示

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ