【Rails応用講座 8】デザイン >
【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を使う為には、準備が必要になります。導入方法は2種類あります。各種ファイルをダウンロードする方法と、HTMLにBootstrapのリンクを記述する方法です。ただし、どちらの方法も読み込むファイルは同じものです。

ダウンロード

ダウンロードして使う方法を見ていきましょう。Bootstrap公式サイトの以下赤枠部分「Download」というボタンを押下します。

https://getbootstrap.com/

そして、表示されたページ内の以下赤枠部分「Download」を押下します。そうすると、自動的に各種ファイルのダウンロードが開始されます。

このファイルをRailsアプリで使用する為には、javascriptファイルをassets/javascriptsに、cssをassets/stylesheetsに移す必要があります。

CSSクラス

UserClips/index.html.erbを、BootstrapのCSSクラスを使って変更してみましょう。以下クラスを追加して下さい。以下図のようなボーダーが表示されます。

このボーダーの説明は、Bootstarap公式の以下ページに掲載されています。

https://getbootstrap.com/docs/4.1/content/tables/

課題

Bootstrapの公式サイトを見てclips/index.html.erbの中に、新たなクラスを設定してみましょう。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る