【rails】stylesheetの設定について - 平凡エンジニアによる平凡ブログ

railsを使う上で基本的な事柄だが備忘録として記載しておきます。

通常HTMLにCSSを使用する際は htmlのタブにて以下の記載をする。 ※直接HTMLファイルに記載することもできるが、可読性を上げるために通常はcssファイルを別につくりそれを読み込んで使用することが多い。以下だとsyle.cssというファイルを読み込んで使っています。

  <link rel="stylesheet" href="style.css">

railsでWEBサイトを作成する場合はHTMLファイルにこの記載が必要ないです。理由はapplication.html.erbというファイルに「stylesheet_link_tag 'application',」という記載があるためです。

<!DOCTYPE html>
<html>
  <head>
    <title>SampleApp</title>
    <%= csrf_meta_tags %>

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

  <body>
    <%= yield %>
  </body>
</html>

この記載により、「app/assets/stylesheets/application.css」を読み込むという設定が入り個々のHTMLファイルでわざわざcssファイルを指定する必要がないからです。

さらにはapplication.cssに「*= require_tree .」と記載するとapp/assets/stylesheets直下にある全ての stylesheetを読み込むことができる。