記事内にプロモーションリンクが含まれる場合があります。
Ruby on Railsを使って、簡易的なwebページを作れましたか？
$ rails new アプリケーション名
または
$ rails new アプリケーション名 -d postgresql$ rails g controller 好きなコントローラー名（複数形） アクション名といった、特定のコマンドを実行することで
- アプリケーション名のフォルダ
- 開発に必要なフォルダやファイル
が自動生成されるので、簡単にwebページが作れるのが、Ruby on Railsのメリットでしたね。
今回は、今まで作成してきたwebページに
CSSや、画像を追加して、サイトの見栄えを良くしていく方法
について説明したいと思います。
目次
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に配置した画像を読み込む場合、 画像ファイル名の前に「/」を忘れないよう注意しましょう。