link_toにcssを適用する方法
Bootstrapでナビバーを作り、リスト形式でログインボタンを作っていた時の事です。
ログインしている時としてない時のボタン表示を if user_signed_in?で分けています。
link_to形式の記述にcssが効かなくて、検索しても「サッ」と出て来なかったので簡単にまとめました。
link_toにcssを効かせるには？
ログアウト・新規登録・ログインボタンのサイズを変更したかった時の記述です。
header.html.erb
<% if user_signed_in? %>
<li class="nav-item active">
<%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link" %>
</li>
<% else %>
<li class="nav-item active">
<%= link_to "新規登録", new_user_registration_path, class: "nav-link" %>
</li>
<li class="nav-item active">
<%= link_to "ログイン", new_user_session_path, class: "nav-link" %>
</li>
<% end %>
application.css
.nav-link {
font-size: 0.8rem;
}
このように、
<%= link_to "リンク名", ***_path, class: "クラス名" %> #=> ここのクラス名にcssを適用する
と書く事で、cssが適用されます。
間違ったパターン
僕が間違って書いたダメなパターンも書いておきます。
これではcssが適用されません。
header.html.erb
<% if user_signed_in? %>
<li class="nav-item active">
<%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
</li>
<% else %>
<li class="nav-item active">
<%= link_to "新規登録", new_user_registration_path %>
</li>
<li class="nav-item active">
<%= link_to "ログイン", new_user_session_path %>
</li>
<% end %>
application.css
.nav-item {
font-size: 0.8rem;
}
このように書き、
<li class="クラス名"> #=> ここのクラス名にcssを適用しようとしていた
<%= link_to "リンク名", ***_path %>
これではcssが適用されません。
まとめ
かなり初歩的なミスで同じように困る方はいないかもしれませんが、
もし同じような事でお困りの方がいた時の参考になれば嬉しいです。
最後までお読みいただき、ありがとうございました。
Author And Source
この問題について(link_toにcssを適用する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/Hayato_prolife/items/11f720e4205f2963e184著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .