【Rails入門】スタイルシート（CSS）を使ってWebアプリを装飾しよう

2024年5月6日

侍テック編集部

Ruby on Rails（以降、Rails）を使ってWebアプリを開発していますか？

まだ、Railsの仕組みを順番に理解している段階だと思います。

Railsの全体像が徐々に見えてきたら、気分一新するためにもデザインを見直したいですよね。

そこで、今回は、スタイルシート（CSS）を使ってWebアプリを装飾する方法を説明します。

といっても、この記事では、CSSの仕様については説明していませんので、CSSの仕様を勉強したい方は以下の記事をご覧ください。

【HTML/CSS入門】これから学習を始めるための基礎を解説！学習のコツも

更新日：2024年10月31日

それでは、この記事では何を説明しているのか、というと、

・Railsのスタイルシート（CSSファイル）はどこにあるのか。
・スタイルシート（CSSファイル）の読み込み順序はどのように変更するのか。

というような内容です。

それでは、行ってみましょう！

スタイルシート（CSSファイル）はどこに？

Railsのスタイルシートは、app/assets/stylesheetsディレクトリに配置します。

たとえば、以下のコマンドでWebアプリを作ると、1つのCSSファイルと、2つのSCSSファイルが作成されます。

bin/rails generate scaffold User name:string

これらのファイルを編集することで、スタイルシートを適用します。

ファイル名	説明
application.css	マニフェストファイルの1つです。
scaffolds.scss	bin/rails generate scaffoldコマンドで作成したWebアプリで共通のSCSSファイルです。複数のモデル／コントローラーをscaffoldコマンドで作成しても、scaffolds.scssは1つしか作成されません。
（コントローラー名）.scss	コントローラー固有のSCSSファイルです。

もちろん、自動で作成されるファイルだけでなく、任意のCSSファイル（SCSSファイル）も追加できます。

スタイルシートの読み込み順序をコントロールする方法は？

スタイルシートの読み込み順序をコントロールするには、app/assets/stylesheets/application.cssの以下の2行を編集します。

（省略）
 *= require_tree .
 *= require_self
（省略）

この2行が、どのようにHTMLのソースコードに反映されるか見比べてみましょう。

（ケース1）標準

scaffolds.scss、users.scss、application.cssの順に読み込まれます。

app/assets/stylesheets/application.cssの内容：

（省略）
 *= require_tree .
 *= require_self
（省略）

「http://localhost:3000/users」のソースコード：

（省略）
<link rel="stylesheet" media="all" href="/assets/scaffolds.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/users.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
（省略）

（ケース2）application.cssを先頭に移動する

application.css、scaffolds.scss、users.scssの順に読み込まれます。

app/assets/stylesheets/application.cssの内容：

（省略）
 *= require_self
 *= require_tree .
（省略）

「http://localhost:3000/users」のソースコード：

（省略）
<link rel="stylesheet" media="all" href="/assets/application.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/scaffolds.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/users.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
（省略）

application.cssの記載位置が先頭に移動しました。

CSSファイルは、記載順序も気にする必要がありますので、うまくスタイルが適用されない場合は、記載順序も確認しましょう。

（ケース3）users.scssとapplication.cssのみを読み込む

users.scss、application.cssの順に読み込まれ、scaffolds.scssは読み込まれません。

app/assets/stylesheets/application.cssの内容：

（省略）
 *= require users.scss
 *= require_self
（省略）

「http://localhost:3000/users」のソースコード：

（省略）
<link rel="stylesheet" media="all" href="/assets/users.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
（省略）

動作を理解するためのWebアプリを作成する

では、概要（結論）が分かったところで、実際に試してみましょう！

CSSの取り扱いを理解するために、RailsをインストールしてWebアプリを作りましょう。

（1）Railsをインストールします。

私は、以下の記事を参考に、VirtualBoxで作成した仮想パソコンにインストールしたLinux Mintに、Railsの開発環境を作成しました。

基本的には記事の手順に従って操作しますが、app/samurai/sample1ディレクトリを作成する代わりに、app/samurai/css-demoディレクトリを作成しました。

Railsを起動して、ブラウザで画面が表示されることを確認したら、いったんRailsを終了してから次に進みます。

初心者でもかんたん！Ruby on Rails の開発環境の構築手順（Mac/Windows 両対応）

更新日：2024年5月6日

Linux Mintのインストールについては、以下の記事で詳しく説明しています。

Linux Mint Cinnamonエディションを使ってみよう

更新日：2024年5月6日

（2）新しい「端末」で以下のコマンドを1行ずつ順番に入力します。

cd app/samurai/css-demo
bin/rails generate scaffold User name:string
bin/rails db:migrate

動作を確認する

スタイルシートがどのように読み込まれているか、確認してみましょう。

（1）ブラウザで「http://localhost:3000/users」にアクセスし、ソースコードを確認します。

私が試したときには、以下のように表示されていました。

<!DOCTYPE html>
<html>
  <head>
    <title>CssDemo</title>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="XXXXX（省略）XXXXX==" />

    <link rel="stylesheet" media="all" href="/assets/scaffolds.self-XXXXX（省略）XXXXX.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/users.self-XXXXX（省略）XXXXX.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-XXXXX（省略）XXXXX.css?body=1" data-turbolinks-track="reload" />
    <script src="/assets/rails-ujs.self-XXXXX（省略）XXXXX.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-XXXXX（省略）XXXXX.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/action_cable.self-XXXXX（省略）XXXXX.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cable.self-XXXXX（省略）XXXXX.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/users.self-XXXXX（省略）XXXXX.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-XXXXX（省略）XXXXX.js?body=1" data-turbolinks-track="reload"></script>
  </head>

  <body>
    <p id="notice"></p>

<h1>Users</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
  </tbody>
</table>

<br>

<a href="/users/new">New User</a>

  </body>
</html>

先ほど紹介したファイル名に似ていますが、ファイル名に「.self-XXXXX（省略）XXXXX」が付与されています。

この3つのファイルがどのように作成されているのか、丁寧に見ていきましょう。

CSSファイルを確認する

「http://localhost:3000/users」で読み込まれているCSSファイルの中身を確認してみましょう。

まずは、1行目で指定されているCSSファイルです。

ブラウザで1行目のhref=””に指定されているURL（http://localhost:3000/assets/scaffolds.self-XXXXX（省略）XXXXX.css?body=1）にアクセスすると、以下のようなCSSファイルが表示されます。

/* line 1, /home/yazaki-mint/app/samurai/css-demo/app/assets/stylesheets/scaffolds.scss */
body {
  background-color: #fff;
  color: #333;
  margin: 33px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

（省略）

これは、app/assets/stylesheets/scaffolds.scssを以下のコマンドでコンパイルした結果（XXXXX.css）のようです。

scss --style expanded --sourcemap=none --line-comments /home/yazaki-mint/app/samurai/css-demo/app/assets/stylesheets/scaffolds.scss XXXXX.css

2行目、3行目も、scaffolds.scssと同様に、users.scssとapplication.cssをコンパイルした結果になっています。

表でまとめてみましょう。

CSSファイル名	元になるSCSSファイル名	CSSファイルの説明
scaffolds.self-XXXXX（省略）XXXXX.css	scaffolds.scss	bin/rails generate scaffoldコマンドで作成したWebアプリで共通のCSSファイルです。
users.self-XXXXX（省略）XXXXX.css	users.scss	Usersコントローラー固有のCSSファイルです。 users.scssは、標準ではコメントのみのため、作成されたCSSファイルには何も書かれていません。
application.self-XXXXX（省略）XXXXX.css	application.css	マニフェストファイルの1つです。 application.cssから、以下の2行が削除された内容になっています。 = require_tree . = require_self

SCSSファイルとは

scaffolds.scssやusers.scssは、SCSSファイルと呼ばれています。

SCSS（Sassy CSS：SassっぽいCSS）やSass（Syntactically Awesome StyleSheets）は、複雑なCSSファイルを簡単に生成するためのプログラミング言語です。

つまり、SCSSやSass（＝プログラミング言語）の文法に従ってソースコード（＝SCSSファイル）を書き、コンパイルすると、ブラウザが理解できるCSSファイルを生成できるという仕組みです。

SassやSCSSについては、以下の記事で触れていますので、あわせてご覧ください。

音速開発！RailsでBootstrapを導入する方法〜Less、Sass、Scss〜

更新日：2024年5月6日

Railsでは、SCSSファイルを作成しておくと、自動的にCSSファイルが生成されます。

マニフェストファイルを確認する

ここまでで、何度かapplication.cssは、マニフェストファイルであると説明してきました。

Railsでは、以下の2つのファイルをマニフェストファイルと呼びます。

app/assets/stylesheets/application.css
app/assets/javascripts/application.js

この2つのファイルは、Railsで作成するWebアプリ（のほぼすべてのページ）に読み込むCSSファイルとJSファイルを指定するために存在します。

ここでは、application.cssの内容を見てみましょう。

app/assets/stylesheets/application.css：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

このファイルで重要な行は、前述のとおり以下の2行だけです。

 *= require_tree .
 *= require_self

「require_tree」や「require_self」は、ディレクティブ（指令）と呼ばれています。

このディレクティブを編集することで、読み込むCSSファイルをコントロールします。

ディレクティブ	説明
require_tree	指定されたディレクトリの中にあるすべてのファイルを、<link>タグで指定する
require_self	自分自身（この例ではapplication.cssから、ディレクティブを削除した内容）を、<link>タグで指定する

この2行は、Railsのレイアウト用テンプレートファイル（例：app/views/layouts/application.html.erb）に書かれている「<%= stylesheet_link_tag ‘application’, （省略） %>」の箇所に展開（追記）する内容を指定しています。

「*= require_tree .」は、「指定されたディレクトリの中にあるすべてのファイルを、<link>タグで指定する」という意味でした。

application.cssが保存されているディレクトリには、application.css、scaffolds.scss、users.scssの3つがあるため、以下の3行が生成されるのです。

<link rel="stylesheet" media="all" href="/assets/scaffolds.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/users.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-XXXXX（中略）XXXXX.css?body=1" data-turbolinks-track="reload" />

なお、「require_self」が「require_tree」の次の行（後ろ）にあるため、「application.self-XXXXX（中略）XXXXX.css」が最後に展開されているのです。

また、任意のCSSファイル（SCSSファイル）を追加する場合は、application.cssが保存されているディレクトリに任意のファイルを追加しておけば、自動的に「<%= stylesheet_link_tag ‘application’, （省略） %>」の箇所に展開（追記）されます。

まとめ

今回は、RailsでCSSファイルを読み込む仕組みを紹介しました。

Railsのレイアウト用テンプレートファイル（例：app/views/layouts/application.html.erb）とマニフェストファイル（app/assets/stylesheets/application.css）の2つで、各ページに適用するCSSファイルと、その順序を指定できました。

思ったようなデザインにならないこともあるかもしれませんが、困ったときこそ慌てずに、この記事で説明した内容を思い出して、丁寧に対応してくださいね。

それでは！