CSS:リンクの範囲を広げる
バナーなどをCSSで作成した時、aタグのクリックの範囲を広げる方法です。
通常
<ul> <li class="nav-item><a href="#">リスト</a></li> <li class="nav-item><a href="#">リスト</a></li> <li class="nav-item><a href="#">リスト</a></li> <li class="nav-item><a href="#">リスト</a></li> </ul>
.nav-item { display:inline-block; } .nav-item a { text-decoration: none; color: #000; }
上記のようなリストを作成したとします。
これを
<ul> <li class="nav-item><a href="#">リスト</a></li> <li class="nav-item><a href="#">リスト</a></li> <li class="nav-item><a href="#">リスト</a></li> <li class="nav-item><a href="#">リスト</a></li> </ul>
.nav-item { display:inline-block; } .nav-item a { display: block; //これがポイント width: 100px; //クリックしたい大きさ height: 50px; //クリックしたい大きさ text-decoration: none; color: #000; }
上記のようにdisplay: blockにして任意の大きさに設定するとできます。