プログラミング

トップページを作成

こんにちは、Nanayakuです。

今回は、Bootstrapの導入方法とページ編集の流れを解説します。

この記事で分かること

  • Bootstrapの導入方法
  • Railsのページ編集の流れ

Bootstrapとは

BootstrapはCSSのフレームワークで、デザイン済みのボタンやメニュー、フォームが用意されています。

また、初めからレスポンシブデザインに対応しており、簡単にスマートフォンの画面でも最適に見れるサイトを構築する事が出来ます。

これらにより、1からHTML・CSSを作るよりも、簡単で早く作る事が出来ます。

この記事では、Bootstrapの詳しい使い方は解説しませんので、興味のある方は下のリンクから使い方を調べてみてください。

 

Bootstrapの導入方法

Bootstrapの基本的な導入方法は2つあります。

  • 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」となるので間違えないようにしましょう。

 

まとめ

ページ編集の流れ

  1. ページ追加
  2. 追加したHTMLファイルのbody部分のHTMLを書きます。
  3. stylesheetsディレクトリに新しいCSSファイルを作ります。
  4. CSSでデザインとレイアウトを整えます。
  5. stylesheetsディレクトリのapplication.scssに新しいCSSファイルをインポートします。

 

制作物

今回作ったプログラムをGithubに上げておきました。

https://github.com/sabakan789/test.rails

ちなみに↓の画像のようになりました。

今回作ったHTML・CSSを書いておきました。

sampleで作ったHTML・CSS

 

最後に

備忘録がわりに作ったので、間違っている所とかあったら、コメントくれると嬉しいです。

-プログラミング
-

Copyright© Nanayaku blog , 2019 All Rights Reserved Powered by AFFINGER5.