Ruby on Rails プログラミング

CSSファイルの場所はどこ?

前回、Ruby on Railsでビューを表示するところまで行きましたが
ビューを整えるCSSファイルはどこにあるのか解説したいと思います。

head内に答えがある

前回の記事で、views/layouts/application.html.erbのファイルが共通のテンプレートである事は触れました。
ここの<head></head>の中のstylesheet_link_tagに'application’と記述のある通り

CSSはapp/assets/stylesheets/application.cssというCSSファイルを読み込むという事です。

application.cssを開いてみよう

application.cssと開いてみると、なにやら英文の羅列が・・・

注目すべき点は*= require_tree .という記述です。

require_treeには引数として与えられたディレクトリ以下のCSSファイルを
アルファベット順に全て読み込むという意味があります。
現在require_treeの引数には.(ドット)が渡されています。

引数.(ドット)はカレントディレクトリを表します。

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

実際にCSSを記載するファイルは?

CSSはposts.scssに記載していきます。

このファイルは、コントローラー作成時にRailsが自動で生成したものです。
デフォルトで記載されている文字は消して、ここにCSSを記述していきましょう!

まとめ

ここまでの解説でHTMLの記述をトップページに表示させ、
CSSで見た目を整える作業環境が整いました!

お好みの見た目になるように実装していきましょう!

追記)stylesheetsの中にreset.scssを入れておく事をお勧めします!

-Ruby on Rails, プログラミング

© 2021 yuyalife Powered by STINGER