[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル

テキストリンクのリストをユーザーがクリックしやすくなるように実装するチュートリアルを紹介します。

サイトのキャプチャ

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:さらによい実装方法

リンクを単にブロックレベルにするだけでなく、さらによくすることができます。
下記の二点に注意して実装します。

  1. paddingはli要素ではなく、a要素に指定します。
  2. 見栄えの間隔はクリックできる領域に隙間ができるので、marginは無しにします。

CSS

ul li { padding: 0; margin: 0; }
ul a { padding: 5px; display: block; }
サイトのキャプチャ

デモページ(当方作成)

リンクのクリックできる領域は大きく、見た目は適度に離れてもクリックできる領域には隙間がありません。

sponsors

top of page

©2018 coliss