【Ruby on Railsアドバンス講座 8】デザインの実装

Bootstrapを使用する

home/index.html.erb

デザイン実装の前に

デザイン作成のための新しいブランチを作成します。以下コマンドを実行して下さい。

$ git checkout -b design-home
Switched to a new branch 'design-home'

次に、scaffold.scssは使わないので中身をコメントアウトして下さい。

今回のようにまとめて複数行をコメントアウトする場合はコメントアウトしたい行を全て選択してMacの場合はCommand+/(スラッシュ）、Windowsの場合はCtrl+/(スラッシュ）を使うと便利です。

次に、今回使用する画像を用意しましょう。以下のリンクからZipファイルをダウンロードし、それを解答してください。

> 画像素材をダウンロード

解答したらその中に入っている画像をassets/imagesフォルダにアップロードします。以下のようにドラッグランドドロップでできるはずです。

Bootstrapとは

Bootstrapとは、かんたんにWebデザイン（HTML/CSS）を作成できるTwitterが提供するライブラリーです。

https://getbootstrap.com/

HTML/CSS/JavaScriptで構成されるボタンやナビゲーションメニューなどが、テンプレートとして用意されているツールです。以下図のように、用意されたcssクラスを指定するだけでデザインされたボタンなどを使う事が出来ます。Bootstrapを使えばWebサイトのデザインは簡単に素早く行えます。

導入

Bootstrapを使う為には、準備が必要になります。導入方法は２種類あります。各種ファイルをダウンロードする方法と、HTMLにBootstrapのリンクを記述する方法です。ただし、どちらの方法も読み込むファイルは同じものです。

CDNでBootstrapを使う

ここではかんたんにCDNを使って実装します。

Bootstrapのページに行きます

ここで必要なコードをコピーします。まずはbootstrapのトップに行きます。
https://getbootstrap.com/

Get startedをクリックします。

Copyをクリックします。

cloud9に戻り、application.html.erbを開き<header>部分にペースト（貼り付け）します。

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  </head>

もう一度Get startedページに行き、今度は以下をクリックしてコピーします。

application.html.erbを開き、今度は</body>のすぐ上に貼り付けます。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>