[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル
Post on:2010年12月2日
sponsors
テキストリンクのリストをユーザーがクリックしやすくなるように実装するチュートリアルを紹介します。
Keep Margins Out of Link Lists
下記は各ポイントを意訳したものです。
[ad#ad-2]
HTML：スタイルシート無しの状態
HTMLは非常にシンプルです。
文字数の異なるテキストリンクをリスト要素で実装します。
HTML
<ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul>
デモページ（当方作成）
リストのアイテムはブロックレベル、リンクはインラインレベルになり、リンクのクリックできる領域はテキストの長さに依存するため、小さく窮屈なものになっています。
CSS：リンクをブロックレベルに
a要素をブロックレベルにすることで、リンクのクリックできる領域をより大きくすることができます。
CSS
ul a { display: block; }
デモページ（当方作成）
クリックできる領域は大きくなりました。しかし、間隔が窮屈でクリックしにくいです。
[ad#ad-2]
CSS：さらによい実装方法
リンクを単にブロックレベルにするだけでなく、さらによくすることができます。
下記の二点に注意して実装します。
- paddingはli要素ではなく、a要素に指定します。
- 見栄えの間隔はクリックできる領域に隙間ができるので、marginは無しにします。
CSS
ul li { padding: 0; margin: 0; }
ul a { padding: 5px; display: block; }
デモページ（当方作成）
リンクのクリックできる領域は大きく、見た目は適度に離れてもクリックできる領域には隙間がありません。
sponsors
