はじめに
link_toメソッドを使って、ページ遷移をしているが、クリックできる部分が文字のところだけだったことに不満を感じたので、調べて実装しました。
CSSでブロック要素に変えて、padding
link_toメソッドにクラス名をつけます。
つける時はclass: "クラス名"
そのクラス名に対して、CSSでdisplay: block;のスタイルをつけます。
さらに、paddingで範囲を広げると、クリックできる部分が拡大します。
ちなみに、marginしてもクリックできる部分は広がりません。
erb
<ul><liclass="menu-list"><%=link_to'マイページ',hoge_path,class: "menu-name"%></li><liclass="menu-list"><%=link_to'カレンダー',hoge_path,class: "menu-name"%></li></ul>css
.menu-list{margin:30pxauto;border:black3pxsolid;padding:0px;}.menu-name{display:block;padding:30px;}display: block;とpaddingが大事な部分です。