16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Rails] CSS適用方法

Posted at

#結論
CSSファイルをapp/assets/stylesheets/ディレクトリに配置すればOK
自動的に読み込まれ、適用される。

※ロジックは下記知識を得れば理解できます。
※「自動的に読み込まれ、適用される」が当てはまらない場合がありますが、
 おおよその場合当てはまります。

#レイアウトテンプレート
アプリケーションのビューファイルの共通部分をまとめたもの。
headの情報や、ヘッダー・フッターなどのすべてのビューで共通となる部分を記述しておく。
各テンプレートファイルは個別の見た目を記述するだけでよくなる。

#application.html.erbファイル
Railsのレイアウトテンプレートファイル。
レイアウトファイルとも呼ばれる。
デフォルトでapp/views/layoutsディレクトリに配置されている。

Image from Gyazo

#yieldメソッド
レイアウトテンプレートに、各テンプレートファイルを展開するためのメソッド。
yieldを記述することで、indexアクションの場合はテンプレートファイルのindex.html.erbが、
newアクションの場合はnew.html.erbが、yield記述部分へ展開される。

上記application.html.erbでは、body要素内に<%= yield %>の記述があり、これによって
「body要素内に各ビューファイルの記述が集約される」という仕組みができている。

*=のような特殊な記法に続けて他のCSSファイルを指定すれば、複数のCSSファイルをまとめて読み込むことが可能。

#stylesheet_link_tagメソッド
読み込むCSSファイルを指定できるヘルパーメソッド。
application.html.erbのstylesheet_link_tagの引数には、'application'と書いてあるため、app/assets/stylesheets/ディレクトリ内のapplication.cssというCSSファイルを読み込むことを示している。

#application.cssファイル
Railsにデフォルトで用意されている、CSSファイルをまとめるためのファイル。
アプリケーション全体に適用するCSSを指定する。
マニフェストファイルとも呼ばれる。
Image from Gyazo

#require_tree
引数として与えられたディレクトリ以下のCSSファイルをアルファベット順に
すべて読み込むメソッド。

デフォルトでapplication.cssにrequire_tree .と記述してある。
引数に与えられた.(ドット)は、カレントディレクトリを指す。

つまり、このrequire_tree .の記述によって、app/assets/stylesheets/というディレクトリにあるCSSファイルは、すべてapplication.cssに読み込まれる。

16
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?