CSSファイルの適用についてまとめたいと思います。
CSSファイルの配置先
Railsのスタイルシートは、app/assets/stylesheetsディレクトリに配置します。
app/views/layouts/application.html.erbのhead要素にstylesheet_link_tagという記述があります。
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
stylesheet_link_tagメソッドとは?
stylesheet_link_tagとは、読み込むCSSファイルを指定できるヘルパーメソッドです。
読み込みたいCSSファイルをapp/assets/stylesheets/というディレクトリに配置し、stylesheet_link_tagメソッドの引数に読み込みたいCSSファイル名を記述します。
上記記述は、application.html.erb内で、stylesheet_link_tagの引数に'application'を指定しており、app/assets/stylesheets/ディレクトリ内に配置されたapplication.cssというCSSファイルを読み込んでいます。
application.cssファイルとは?
Railsにはじめから用意されている、CSSファイルをまとめるためのファイルです。マニフェストファイルとも呼ばれます。
application.cssには、アプリケーション全体に適用するCSSを指定できます。
「*= require_tree .」 という記述がポイント
require_treeとは?
require_treeは、引数として与えられたディレクトリ以下のCSSファイルをアルファベット順にすべて読み込むという機能を持ちます。
まとめ
CSSファイルはapp/assets/stylesheetsディレクトリに配置します
app/views/layouts/application.html.erb内のtylesheet_link_tagが読み込まれ
application.cssファイルに飛び、require_tree から
app/assets/stylesheets/ディレクトリ内にある、全てのCSSファイルを適用することができます。