ウノウラボ Unoh Labs: 四角いリンク

yamaokaです。 最近タブをメタファーにしたナビゲーションをよく見るようになりました。タブには大抵、内容を示すキャプションが付けられています。さて、どこからどこまでがリンクでしょうか。どの部分をクリックすればそのタブを選択できるでしょうか。 例えば、キャプションの文字だけにリンクが貼られている場合。利用者はタブの中のさらに狭い範囲、文字の部分を狙ってクリックしなくてはなりません。 実はマウスの操作というのは難しいのです。狭い範囲を狙って指定することにはあまり向いていません。目的到達のために狭い範囲のクリックを強制するのはどう考えてもよいインターフェースではありません。 そこで大抵のタブ型インターフェースではタブの枠の中全体をリンクとして扱えるようになっています。 アンカー要素のdisplay属性をblockにして、必要な高さと幅を与えることでリンクの範囲を四角形に広げることができますね

[hisasann]

丸いリンクとか作ってみたい

[wacky]

タブインタフェースで押しやすいタブボタンを作るために。CSSの display:block と padding でリンク範囲を拡大。

[willnet]

タブ風リンクのリンク範囲を文字だけでなくタブ全体にする方法

[hiro_y]

どうしてそういうデザインになっているか、という部分に着目してほしいと思って書きました。

[satoryu]

アンカー要素でタブを作るときのスタイルシートの指定