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

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

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

 

なお本記事は、TechAcademyのオンラインブートキャンプ、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では、初心者でも、Ruby on Railsを使ったプログラミングを習得できる、オンラインブートキャンプを開催しています。

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