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

★CSS3リファレンス

nav-index …… タブキーによるフォーカス移動の順序を指定する
※サポートされているブラウザは現在調査中です。

nav-indexプロパティは、タブキーによるフォーカス移動の順序を指定する際に使用します。

フォーカス移動の順序は番号(0でない正の数、1が最初)で指定します。 異なる要素に同じ番号を指定した場合には、文書内の記述順となります。

※メモ:nav-indexプロパティについては、動作を確認中です。上記の説明は大体合っていると思いますが、以下のサンプルはイマイチ自信がありません。

■値

auto
要素のナビゲーション順序は、ユーザーエージェントによって自動的に割り当てられる(初期値)
番号
番号(0でない正の数)で要素のナビゲーション順序を指定する
inherit
親要素の値を継承する

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

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

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

input.sample1 {nav-index:1;}
input.sample2 {nav-index:2;}
input.sample3 {nav-index:3;}
input.sample4 {nav-index:4;}
input.sample5 {nav-index:5;}
input.sample6 {nav-index:6;}
input.sample7 {nav-index:7;}
input.sample8 {nav-index:8;}
input.sample9 {nav-index:9;}
input.sample0 {nav-index:10;}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

<form action="xxx.php" method="post">
<input class="sample7" type="button" value="7">
<input class="sample8" type="button" value="8">
<input class="sample9" type="button" value="9"><br>
<input class="sample4" type="button" value="4">
<input class="sample5" type="button" value="5">
<input class="sample6" type="button" value="6"><br>
<input class="sample1" type="button" value="1">
<input class="sample2" type="button" value="2">
<input class="sample3" type="button" value="3"><br>
<input class="sample0" type="button" value="0">
</form>

</body>
</html>
↓↓↓

ブラウザ上の表示




▲ページ先頭へ
トップページ  > CSS3  > nav-index
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ