link_toメソッドのクリックできる部分を拡大させたい

はじめに

link_toメソッドを使って、ページ遷移をしているが、クリックできる部分が文字のところだけだったことに不満を感じたので、調べて実装しました。

CSSでブロック要素に変えて、padding

link_toメソッドにクラス名をつけます。
つける時はclass: "クラス名"
そのクラス名に対して、CSSでdisplay: block;のスタイルをつけます。
さらに、paddingで範囲を広げると、クリックできる部分が拡大します。

ちなみに、marginしてもクリックできる部分は広がりません。

erb

<ul>
  <li class="menu-list">
    <%= link_to 'マイページ', hoge_path, class: "menu-name" %>
  </li>
  <li class="menu-list">
    <%= link_to 'カレンダー', hoge_path, class: "menu-name" %>
  </li>
</ul>

css

.menu-list {
  margin: 30px auto;
  border: black 3px solid;
  padding: 0px;
}
.menu-name {
  display: block; 
  padding: 30px;
}

display: block;とpaddingが大事な部分です。