yamaokaです。

最近タブをメタファーにしたナビゲーションをよく見るようになりました。タブには大抵、内容を示すキャプションが付けられています。さて、どこからどこまでがリンクでしょうか。どの部分をクリックすればそのタブを選択できるでしょうか。

例えば、キャプションの文字だけにリンクが貼られている場合。利用者はタブの中のさらに狭い範囲、文字の部分を狙ってクリックしなくてはなりません。

実はマウスの操作というのは難しいのです。狭い範囲を狙って指定することにはあまり向いていません。目的到達のために狭い範囲のクリックを強制するのはどう考えてもよいインターフェースではありません。

そこで大抵のタブ型インターフェースではタブの枠の中全体をリンクとして扱えるようになっています。

アンカー要素のdisplay属性をblockにして、必要な高さと幅を与えることでリンクの範囲を四角形に広げることができますね。大きさを固定値で指定してもかまいませんが、そうするとキャプションの文字の大きさによってははみ出てしまうかもしれません。padding属性を使えば大丈夫です。

.nav a {
  display: block;
  padding: 5px 10px;
}

マウスのポインタがタブの上に乗ったときにタブの色に変化をつけてあげると、よりリンクであることを強調することができるかもしれません。

.nav a:hover {
  background-color: #DEE;
}

ほとんどのサイトで同様のテクニックが使われていて、利用する側としては当たり前のように使っているインターフェースはいろいろとあります。

しかしそういうインターフォースでも、「なぜそうなっているのか？」と考えてみると面白いと思います。