4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

link_toにcssを適用する方法

Last updated at Posted at 2021-01-30

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が適用されません。

まとめ

かなり初歩的なミスで同じように困る方はいないかもしれませんが、
もし同じような事でお困りの方がいた時の参考になれば嬉しいです。
最後までお読みいただき、ありがとうございました。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?