【Ruby/Rails】CSSをページごとに使い分けたい

2018年5月29日Ruby

こんにちは、しきゆらです。

最近はRailsと戯れています。

今回は、タイトルの通りRailsの仕組みを使いながら、CSSをページごとに切り替えたいときの方法をメモしていきます。

 

Railsさんは、たくさんあるJSやCSSをガッチャンコして一塊にまとめる、という機能を持っています。

application.js/cssあたりがそのもととなるファイルです。

確かに、1回のリクエストでデータをもらえる上にキャッシュしておけば何度も取得しなくても良くなります。

 

しかし、JSもCSSもページごとに分けてほしい場合もありますよね。

例えば、ページごとに同じクラス名を割り当てている場合やwindow.onloadなどです。

これらをまとめられてしまうと、意図しない挙動をしてしまいます。

これをページごとに切り替える方法をまとめていきます。

今回は、CSS編です。

JS編は次回です。

 


 

CSSをページごとに切り替えたい

基本的な発想としては、「コントローラの名前で切り替える」ということ。

ではコントローラの名までを取得し、すべてのViewに対して埋め込むにはどうすればいいか。

答えは簡単で、「app/view/layouts/application.html.erb」に対して指定すると解決です。

(application.html.erb以外にも、独自にテンプレートを作っている場合には、それに追加してもいいかもしれません)

 

今回指定するのはbody。

例としては、以下の通り。(bodyのところのみを切り取っています)

<body class='<%= controller.controller_name %>'>
   <%= yield %>
</body>

「controller.controller_name」でコントローラの名を取得できます。

 

あとは、CSS側で以下のように切り替えできます。

// hoge_controllerに対するスタイル
.hoge {

}

// fuga_controllerに対するスタイル
.fuga {

}

このように、コントローラで区切ってあげると、すでに出来上がった構造を崩すことなく

ページごとにスタイルを分けることができますね。

 

コントローラだけでなく、アクション名も「controller.action_name」で取得できるので

あとは煮るなり焼くなりするとどんな場合でも実現できそうですね。

 

簡単ですが、今回はここまで。

おわり。

Posted by しきゆら