【Rails】条件に応じて、適用するCSS（セレクタ）を変える（備忘録）

みなさん、こんにちは！
筆者は大学生限定のプログラミングスクール「GeekSalon」でメンターをしています！
興味のある方や話だけでも聞いてみてい方はぜひのぞいてみてください👍

さっそく今回の本題に入っていきます！
今回は、条件に応じて適用するCSSのセレクタを変えるというものを実装していきます。

筆者は、投稿にカテゴリ（category）のカラムを追加しており、そのカテゴリに応じて投稿の背景色が変わるというものを実装しました！
完成イメージは以下のようになります

実装環境

ruby 2.7.4p191 (2021-07-07 revision a21a3b7d23) [x64-mingw32]
Rails 6.1.4.1

実装①　～HTMLファイルのClassをいじる～

まずは投稿の背景色を実装するために定義したClassをいじっていきます。

Tweet/index.html.erb

<div class="tweet-container
<% case t.category %>
<% when "#春" then %>
  tweetback1
<% when "#夏" then %>
  tweetback2
<% when "#秋" then %>
  tweetback3
<% when "#冬" then %>
  tweetback4
<% end %>
">

#省略

</div>

実装②　～CSSファイルをいじる～

次はHTMLファイルで定義されたそれぞれのClassに対応するセレクタを用意し、それに記述を加えていきます。

tweet.scss

.tweet-container{
    border: dotted;
    border-radius: 10px;
    padding-top: 10px;
    margin: 5px;
  }

  .tweetback1{
    border-color: rgb(255, 255, 252);
    background-color: rgba(248, 211, 233, 0.349);
  }

  .tweetback2{
    border-color: rgb(80, 255, 153);
    background-color: rgba(80, 255, 153, 0.349);
  }

  .tweetback3{
    border-color: rgb(255, 255, 80);
    background-color: rgba(255, 243, 80, 0.349);
  }

  .tweetback4{
    border-color: rgb(80, 255, 255);
    background-color: rgba(80, 176, 255, 0.349);
  }

これで終わりです！
このようにすることで、投稿時のカテゴリに応じて適用されるCSSのセレクタを変更し、表示される投稿の背景色を変更することができました！

このやり方は投稿の背景色変更以外にも幅広く使えるため、プロダクトに応じて応用していきましょう！