Railsで'application.css'以外のCSSファイルを作成する手順

はじめに

実装したこと

レスポンシブ対応のために新しいCSSファイルを作成と適用する手順を記事にします。

動作環境

Ruby 3.1.2
Rails 6.1.7.3

手順

１. まず app/assets/stylesheetsディレクトリ内に、'responsive.css'という名前の新しいCSSファイルを作成します。(ファイル名はなんでも問題ないです)

２. responsive.cssファイルを開き、メディアクエリなどのレスポンシブデザインに必要なスタイルルールを記述します。例えば、以下のようなコードを追加します。

responsive.css

/* 例: スマートフォンサイズの場合に適用されるスタイル */
@media screen and (max-width: 520px) {
  /* スタイルの定義 */
}

/* 例: タブレットサイズの場合に適用されるスタイル */
@media screen and (min-width: 521px) and (max-width: 960px) {
  /* スタイルの定義 */
}

/* 例: デスクトップサイズの場合に適用されるスタイル */
@media screen and (min-width: 961px) {
  /* スタイルの定義 */
}

上記の例では、スマートフォン、タブレット、デスクトップサイズのそれぞれに対して異なるスタイルを適用するためのメディアクエリが含まれています。

3. app/assets/stylesheets/application.cssファイルを開きます。
application.cssファイル内で、新しいresponsive.cssファイルをインポートするためのディレクティブを追加します。以下のように記述します。

application.css

/*
 *= require responsive
 */

これにより、responsive.cssファイルがapplication.cssに結合され、アプリケーション全体で使用されるCSSファイルとなります。

それぞれのメディアクエリ用CSSの読み込み優先順位を確認しよう
CSSの優先順位も注意が必要です。それぞれのメディアクエリ用のCSSが通常のCSSより下に記載されているか確認しましょう。今回は上記コードを'application.css'の最下部へ記載することとします。

４.'application.html.erb'ファイルで、responsive.cssファイルが適用されるように指定します。
通常、headセクション内のstylesheet_link_tagヘルパーを使用してCSSファイルを読み込みます。今回は'application.html.erb'ファイルのheadセクション内に以下のように記述します。

application.html.erb

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

以上の手順に従うと、Railsアプリケーションでresponsive.cssファイルを使用することができます。

終わりに

忘れないようにアウトプットして記事にしております。
誤りなどがあれば、コメントいただけますと幸いです。閲覧いただきありがとうございます。

参考にさせていただいた記事