tabindex属性 - フォーカス

公開日: 2017/02/21

tabindex属性は、キーボードフォーカスにおいて、この要素をどのような取り扱いにするのか設定するための属性です。対象外にしたり、順番を設定したりできます。

説明

tabindex属性は、Tabキーによるフォーカスの順番を調整するための属性です。値には数値を指定します。

1以上: 数値がそのまま、Tabキーによるフォーカスの順番になる。
0: Tabキーによるフォーカスの対象になるが、順番は設定されない。
-1: Tabキーによるフォーカスの対象にならない。ただし、フォーカスはできる。

HTML

<!-- 1番目にフォーカス -->
<p tabindex="1">SYNCER</p>

<!-- 最後にフォーカス -->
<p tabindex="0">SYNCER</p>

<!-- Tabキーではフォーカスされない (フォーカスはできる) -->
<p tabindex="-1">SYNCER</p>

<!-- 2番目にフォーカス -->
<p tabindex="2">SYNCER</p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】tabindex属性 - フォーカス</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/tabindex/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>tabindex属性は、要素のフォーカスの順番を調整するための属性です。</p>

<h2>tabindex=1</h2>
<p tabindex="1">Tabキーによるフォーカス移動の対象になります。1番目にフォーカスされます。</p>

<h2>tabindex=0</h2>
<p tabindex="0">Tabキーによるフォーカス移動の対象になります。順番は設定されません。</p>

<h2>tabindex=-1</h2>
<p tabindex="-1">フォーカスできるけど、Tabキーによるフォーカス移動の対象にはなりません。</p>

<h2>tabindex=2</h2>
<p tabindex="2">Tabキーによるフォーカス移動の対象になります。2番目にフォーカスされます。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/831/"> <meta charset="utf-8"> <title>【デモ】tabindex属性 - フォーカス</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/tabindex/"> </head> <body>

<p>tabindex属性は、要素のフォーカスの順番を調整するための属性です。</p> <h2>tabindex=1</h2> <p tabindex="1">Tabキーによるフォーカス移動の対象になります。1番目にフォーカスされます。</p> <h2>tabindex=0</h2> <p tabindex="0">Tabキーによるフォーカス移動の対象になります。順番は設定されません。</p> <h2>tabindex=-1</h2> <p tabindex="-1">フォーカスできるけど、Tabキーによるフォーカス移動の対象にはなりません。</p> <h2>tabindex=2</h2> <p tabindex="2">Tabキーによるフォーカス移動の対象になります。2番目にフォーカスされます。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>