【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が提供するライブラリーです。
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クラスを使って変更してみましょう。以下クラスを追加して下さい。以下図のようなボーダーが表示されます。
無料ビデオ講座のお知らせ
Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。