Ruby on RailsでCSSを使う方法を現役エンジニアが解説【初心者向け】

初心者向けにRuby on RailsでCSSを使う方法について現役エンジニアが解説しています。Ruby on RailsでCSSを使うには、appフォルダ直下のasetsフォルダのstylesheetフォルダのファイルを変更します。scssファイルの読み込み方法・書き込み方法について解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

Ruby on RailsでCSSを使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。

田島悠介

今回は、Rubyに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Ruby on RailsでCSSを使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Ruby on RailsでCSSを使う方法

Ruby on Railsでアプリを作成する場合にはCSSで調整することになります。

Ruby on Railsをインストールした際に自動的に書き込み用のファイルが生成されるため、その作成された外部ファイルの中に記述することで調整が可能です。

CSSファイルは自分で作ったアプリ名のフォルダ直下のappフォルダ内にあります。appフォルダ直下のassetsフォルダのさらにその中にstylesheetsフォルダがあります。

この中には通常はapplication.cssファイル、自分で作成したアプリ名のscssファイルなどが入っています。sampleというアプリを作成した場合にはsample.scssというファイルが自動で作成されています。アプリをscaffoldを使用して作成した場合にはscaffolds.scssファイルが作成されています。

このファイルの中に表示される画面のデフォルトを記述してあるものです。

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

書き込み方法

sample.scssファイルの中にcssを記述することでアプリに反映されます。このscssはSassという、stylesheetを拡張したものです。

scssはCSSよりも記述量が少なくすみ、より複雑なコードの再利用なども出来るようになります。

このscssファイルにはscssで記述するためのファイルですが、通常のCSSでの記述も認識をされるため、このファイルの中にCSSを記述すれば問題ありません。

また複数のページを作成した場合に全体に共通のスタイルを指定する場合にはapplication.cssにCSSを記述することで全ページに反映されるようになります。

読み込む方法

以前のRuby on RailsではSassが入っておらず、gemをインストールしなければなりませんでしたが、現在のバージョンではRuby on Railsをインストールすると自動的にSassもインストールされています。

反映する方法

scssは本番環境ではコンパイルをする必要があります。

コンパイルをすることでscssはCSSとして読み込みがされ、自動的に圧縮がされるようになります。

ターミナルで以下を打ち込みます。

RAILS_ENV=production bin/rails assets:precompile

 

実際に書いてみよう

testというページを作成しました。

stylesheetsの中にtests.scssファイルを作成しています。

scssファイルの中に今回は単純なCSSを記述してページに反映をさせます。

(app/sylesheets/tests.scss)

body{
 color:orange;
 background-color:gray;
 font-size:20px;
 }

 

 

まとめ

scssファイルにはscssとCSSの両方の記述方法をすることが出来ます。

反映させたいページごとにCSSを調整すことが出来、rails serverを起動させ表示ページを確認してながら記述していくことも可能です。

はじめにscssで記述するかCSSで記述するかを確認していくことも大切です。

筆者プロフィール

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。
WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、Ruby on Railsを使ったプログラミングを習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。