Rails 一日一つメソッド (Day33) CSSファイルの適用

 

Rails 一日一つメソッド (Day33) CSSファイルの適用

 

1. CSSファイルの適用

 - Railsの stylesheetは、app/assets/stylesheetsディレクトリに配置しており、app/views/layouts/application.html.erbの head要素に stylesheet_link_tagという記述がある。

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

 

2. application.css fileとは？

 - Railsで CSSスタイルを管理するfileで、全般的なレイアウト、デザイン、スタイルを定義することで使われ、他のCSS fileやstylesheet frameworkを含まれる事ができる。

 - application.css fileは app/assets/stylesheetsディレクトリに配置し、Sprockets(Asset Pipeline)を使うProjectで見られる。

/*
 *= require_tree .
 *= require_self
 */

 

 require_tree .

 - 現在ディレクトリ内の全てのCSS Fileを application.css Fileに含ませる指示。

 require_self

 - application.css File自体のCSSコードを含ませる指示で、application.css File内で直接作成した stylesheetを適用できる。

 

3. require_treeとは？

 - Railsの Asset Pipeline(Sprockets)で使われる directiveの一つで、require_treeは指定されたディレクトリとその下位のすべてのディレクトリにある物を含ませる指示を Sprocketsに提供する。

 - . は現在のディレクトリを意味して、app/assets/stylesheetsディレクトリ及びその下のCSS Fileを application.cssに含ませる指示を表す。

 

---

CSS Fileは app/assets/stylesheetsディレクトリに配置する。

 - app/views/layouts/application.html.erb内の stylesheet_link_tagが読み込まれ application.css Fileに飛ぶ、require_treeから app/assets/stylesheets/ディレクトリ内にある、全てのCSS Fileを適用する事ができる。