Fin_IT

FinanceとITに関する記事をメインに。

RailsでCSSが機能する仕組み

本記事ではRails newで作成したアプリ中にて
cssを機能させる方法およびその仕組みについて以下の題目にてお話を進めたいと思います
・cssの使い方
・cssが機能するまでの流れ

・cssの使い方
今回cssの対象とするファイル内容は以下の通りです
app/views/home/index.html.erb

<h1>Hello World</h1>
<h2>Hello World</h2>

ブラウザ上
f:id:stock_study:20200328150947p:plain
cssを使いたい方は結論から申し上げますと
app/assets/stylesheets/application.css (デフォルトで存在）
もしくは
app/assets/stylesheets/~~~.css（自作する)
中のどちらかに記述しましょう
今回は自作したapp/assets/stylesheets/home.css
にて以下のコードを記述しました

h1 {
    background-color:red;
}
h2 {
    background-color:green;
}

これで以下のようにcssが反映されました
f:id:stock_study:20200328151107p:plain

以下ではなぜファイル指定等もしていないのに機能しているのかについてお話ししたいと思います
・Rails中でcssが機能するまでの流れ
流れを理解するためには下記2点の理解が必要になります
viewが表示される仕組み
application.cssの役割
個々について詳細に説明していきます


viewが表示される仕組みrailsでは全てのviewファイルは、app/views/layouts/application.html.erb 中の 

 <%= yield %>

に組み込まれます

app/views/layouts/application.html.erb　の全容は以下の通りです

<!DOCTYPE html>
<html>
  <head>
    <title>SampleApp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

ですので本記事のapp/views/home/index.html.erb　にて作成したviewファイルは

<h1>Hello World</h1>
<h2>Hello World</h2>

ですが実際には下記のようなファイルとしてブラウザ上で読み取られます

<!DOCTYPE html>
<html>
  <head>
    <title>SampleApp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
 <h1>Hello World</h1>
 <h2>Hello World</h2>
  </body>
</html>

これを見るとcssのリンク先が以下のように記述されていることが分かります

 <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

このコードによってcssはapplication.cssにて書いているという指定をしています
それではapplication.cssとはどのようなファイルなのでしょうか？


application.cssの役割
applicaton.cssファイルはrails new にてアプリの作成を行った際にデフォルトで作成されます
ファイル内容は以下の通り
app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

  *= require_tree .
  *= require_self
 */

ファイルの上部はこのファイルについての説明書きで大事なのは以下の2文のみです

 *= require_tree .
 *= require_self

この2文はコメントアウト化されているように見えますが、これはdirectiveと呼ばれ、Ruby on Railsがapp/assets を管理する際に用いられる記法です。
それぞれの意味についてですが

 *= require_tree ~

は指定されたフォルダ配下のすべてのアセットを読み込むという意味になっており
今回の場合は .(カレントディレクトリ）を指定している為、
app/assets/stylesheets フォルダのすべてのcssを読み込むようにしてくれます
なので自作したapp/assets/stylesheets/home.css はこの段階で機能します

 *= require_self

このコードについては、application.css内にもcssを記述することはできるのですが
それを読み込むようにする為のコードです。


以上がRailsでCSSが機能する仕組みです
参考になれば幸いです

Twitterにても情報発信を行っているので良ければフォローの方お待ちしております