*

PC LIFE

ホーム >  Web制作 >  CSSメモ > 
リンク領域の拡大 MENU 

クリック時のリンク領域拡大

文字を入れたボタン(リストやボックス)のリンクは、CSSで細工をして領域を広げない限り、文字の部分にしか反応しない(右例示の拡大前)。

拡大後の領域にマウスを重ねると、文字以外の全体の領域が選択されるようになる。 このようにすることによって、ボタンとしての操作感が格段に向上する。

html

css

※ ポイントは以下の3点です。

1)11行目、15行目:高さを確保する場合、paddingでは全体が選択出来ません。line:heightを使って下さい。

2)14行目:ul.menu_after a {display:block;} にするのが、最大のポイントです。

3)16行目:後は、マウスを重ねたときの背景色設定です。