[掲載日] (更新日) この記事は約 4 分で読めます

Ruby on RailsのWebページの見た目を修正してみよう 

Ruby on RailsのWebページの見た目を修正してみよう

Ruby on Railsを使って、簡易的なwebページを作れましたか?

$ rails new アプリケーション名
または
$ rails new アプリケーション名 -d postgresql
$ rails g controller 好きなコントローラー名(複数形) アクション名

といった、特定のコマンドを実行することで

  • アプリケーション名のフォルダ
  • 開発に必要なフォルダやファイル

が自動生成されるので、簡単にwebページが作れるのが、Ruby on Railsのメリットでしたね。

今回は、今まで作成してきたwebページに

CSSや、画像を追加して、サイトの見栄えを良くしていく方法

について説明したいと思います。

Ruby on Railsのプログラミングを最短1ヶ月で習得
RailsHack講座では13日間の無料期間(全額返金保証)で安心のスクールです。
WEBアプリケーションが実際に作成できます。
» RailsHack講座の13日間の無料体験(全額返金保証)はこちら

Ruby on RailsのCSSファイルの場所は?

Ruby on Railsでは

  • アプリケーション名のフォルダの作成
  • 開発に必要なフォルダやファイルの作成

は、コマンドを入力するだけで、簡単にできましたよね。

もちろん「CSSファイル」も

$ rails g controller コントローラ名 アクション名

のコマンドを実行したときに、自動で生成されています。

では、CSSファイルの場所はというと・・・

app/assets/stylesheets

というフォルダの中です。

このstylesheetsフォルダの中には

  • application.cssファイル
  • .scssファイル

が入っています。

Ruby on Railsでは、基本的には、この中の「CSSファイル」または「scssファイル」に、CSSコードを書いていきます。

ただ、例えば「ヘッダー」などすべてのページに、同じCSSを使いたいという場合は、「application.css」に記述すれば、アプリ全体に適用することができます。

ところで、stylesheetsフォルダの中の2つのファイル。

  • application.css 
  • .scss 

cssはわかるけど、scssってなに?と思った人もいるかと思いますので簡単に説明しますね。

scssとは?

scssとは、CSSをよりシンプルに記述できるように設計・開発されたRuby製の言語です。

「また新しい言語を覚えるのは無理!」

と正直思った人もいるかもしれませんが、scssファイルでは、scssとCSSの両方が使えます。

通常のCSSを記述しても反映されるので心配はいりません。

ただ、ページ数が多くなると、CSSだけでは、長く複雑なコードになってしまいます。

その点、scssだと

  • {}を使った入れ子構造が使える
  • コードを変数で指定できる 

ので

  • CSSよりも記述量が少なくすむ
  • シンプルでわかりやすいコードが書ける
  • 複雑なコードを簡単に再利用できる

というメリットがあるので、覚えておくといいですよ。

Ruby on Railsの画像挿入の仕方

Ruby on Railsでは、画像の保存場所として

  • app/assets/images
  • public

が用意されています。

どちらに置いていても、画像を読み込むのに困ることはありませんが、一般的に

  • app/assets/images・・・開発者が用意したアプリに関する画像 
  • public・・・ユーザーがアップロードするような画像

と使い分けることが多いです。
実際アップロードした画像の指定先は「public」がほとんどです。

画像挿入の記述方法

「app/assets/images」と「public」のどちらに画像が配置されているかで、記述方法が違います。

app/assets/imagesに画像ファイルがある場合

<%= image_tag "画像ファイル名" %>

publicディレクトリに画像ファイルがある場合

<%= image_tag "/画像ファイル名" %>

publicに配置した画像を読み込む場合、「 / 」から始める点に注意です。

Ruby on RailsのWebページの見た目を修正してみようまとめ

CSSファイルの場所は

app/assets/stylesheetsフォルダの中

です。

stylesheetsフォルダの中には2つのファイルがあります。

  • application.css・・・すべてのページに、同じCSSを使いたい場合
  • .scss・・・基本的にはこちらに記述。scssとCSSの両方が使える

publicに配置した画像を読み込む場合、 画像ファイル名の前に「/」を忘れないよう注意しましょう。

挫折しそうなプログラミングなら動画講座。30日間全額返金保証