こんにちは、Nanayakuです。
今回は、Bootstrapの導入方法とページ編集の流れを解説します。
この記事で分かること
- Bootstrapの導入方法
- Railsのページ編集の流れ
目次
Bootstrapとは
BootstrapはCSSのフレームワークで、デザイン済みのボタンやメニュー、フォームが用意されています。
また、初めからレスポンシブデザインに対応しており、簡単にスマートフォンの画面でも最適に見れるサイトを構築する事が出来ます。
これらにより、１からHTML・CSSを作るよりも、簡単で早く作る事が出来ます。
この記事では、Bootstrapの詳しい使い方は解説しませんので、興味のある方は下のリンクから使い方を調べてみてください。
Bootstrapの導入方法
Bootstrapの基本的な導入方法は２つあります。
- Bootstrap本体を直接ダウンロードする
- HTMLファイルにBootstrapのリンクを直接貼り付ける
railsの場合、上記以外の方法で導入する事が出来るので、その方法を紹介します。
Bundlerを利用
Gemfileに「gem 'bootstrap-sass'」と記入し、BootstrapのGemパッケージを追加します。
ファイルの保存後、「bundle install」コマンドでインストールします。
Gemfileの書く場所は、group~endで囲まれてない上の部分に書きます。
Railsには「開発環境」「テスト環境」「本番環境」の3つの環境が用意されており、全環境で使えるGemパッケージと個々の環境で使えるGemパッケージに分ける事が出来ます。
| test | テスト環境でのみ使うGemパッケージ |
| development | 開発環境のみで使うGemパッケージ |
| development, :test | 開発環境とテスト環境で使うGemパッケージ |
ファイルの設定変更
現在のままでは、CSSの設定のため、Bootstrapの設定が反映されません。
インストールしたBootstrapのCSSとJavaScriptを読み込ませるために設定変更が必要です。
CSSは、最初に「application.css」を「application.scss」に拡張子を変えます。
次にapplication.scssの中の設定はCSSのままなので、ファイル内に書かれているものを削除し、
@import "bootstrap-sprockets";
@import "bootstrap";
を新しく書きます。
JavaScriptは、application.jsの「//= require_tree .」の上に「//= require bootstrap-sprockets」を書き足します。
以上でBootstrapの初期設定は完了です。
トップページの編集
application.html.erbの役割
Viewのlayoutsディレクトリには、共通で使うHTML（メタ情報）を記述したファイルを置きます。
メタ情報とは、ヘッダーやナビゲーションバーなどの画面共通部分や、CSSやJavaScriptの読み込みなどユーザーから見えない部分の情報の事です。
application.html.erbは、画像のようにheadの部分を固定し、bodyの部分だけ変わるようになっています。
<%= yield %>がなければ、他のViewを表示できません。
HTMLの書き方
<%= %>・<% %>はERBです。
<%＝ %>は、囲んだRails（Ruby）のプログラムの結果をHTMLで出力します。（検索結果など）
<% %>には、HTMLとして出力しなくてもいい処理を記述します。
例
<% if 条件式 %>
<p>正しい</p>
<% else %>
<p>違います</p>
<% end %>
HTMLファイルの拡張子は「.erb」なので付け忘れたり、間違えないように注意しましょう。
CSSファイルの作成
CSSファイルはstylesheetsディレクトリに置きます。
追加したSSファイルを読み込むためには、application.scssにインポートしなければなりません。
application.scssにインポートするには、「@import 'ファイル名' ; 」と書きます。
ファイル名のみで、拡張子は入れません。
新しいCSSファイルを作成するごとに、上記の処理を行います。
CSSファイルの拡張子は「cscc」となるので間違えないようにしましょう。
まとめ
ページ編集の流れ
- ページ追加
- 追加したHTMLファイルのbody部分のHTMLを書きます。
- stylesheetsディレクトリに新しいCSSファイルを作ります。
- CSSでデザインとレイアウトを整えます。
- stylesheetsディレクトリのapplication.scssに新しいCSSファイルをインポートします。
制作物
今回作ったプログラムをGithubに上げておきました。
https://github.com/sabakan789/test.rails
ちなみに↓の画像のようになりました。
今回作ったHTML・CSSを書いておきました。
最後に
備忘録がわりに作ったので、間違っている所とかあったら、コメントくれると嬉しいです。
