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にして任意の大きさに設定するとできます。