スライドショー

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

Ruby on Rails(以降、Rails)を使ってWebアプリを開発していますか?

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

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

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

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

【初心者必見】HTML/CSS入門サイト厳選7選
更新日 : 2019年5月3日

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

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

というような内容です。

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

スタイルシート(CSSファイル)はどこに?

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

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

bin/rails generate scaffold User name:string

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

ファイル名説明
application.cssマニフェストファイルの1つです。
scaffolds.scssbin/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 両対応)
更新日 : 2019年8月9日

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

Linux Mint Cinnamonエディションを使ってみよう
更新日 : 2019年12月5日

(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>

<link rel="stylesheet" (省略) />で、3つのCSSファイルが読み込まれていますね。

先ほど紹介したファイル名に似ていますが、ファイル名に「.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.cssscaffolds.scssbin/rails generate scaffoldコマンドで作成したWebアプリで共通のCSSファイルです。
users.self-XXXXX(省略)XXXXX.cssusers.scssUsersコントローラー固有のCSSファイルです。
users.scssは、標準ではコメントのみのため、作成されたCSSファイルには何も書かれていません。
application.self-XXXXX(省略)XXXXX.cssapplication.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〜
更新日 : 2019年5月20日

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ファイルと、その順序を指定できました。

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

それでは!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

侍テック編集部

侍テック編集部

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説