4
0

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 1 year has passed since last update.

[Rails]CSSファイルの適用について

Posted at

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ファイルを適用することができます。

4
0
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
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?