前のパートに戻る 完了して次のパートへ  

  3-1 Bootstrap・fontawsome・viewportの設定

今回のパートではBootstrapを導入していきたいと思います。

Bootstrapは最も有名なCSSのフレームワークで、CSSを細かく指定せずにサイトをある程度形にできます。レスポンシブルにも対応してくれる便利なツールです。Bootstrapを導入するとWebアプリケーションを効率よく開発することができます。

(今回のBootstrap4のgemの公式ドキュメントのこちらを参考にしてます)

Bootstrapについて詳しく勉強したい方は以下動画をご覧ください。

Bootstrap 4入門

学習キーワード


- Bootstrap
- scss


gemをインストール


Deviseの設定をした時もまずはgemをインストールしたようにBootstrapに関してもまずはgemをインストールします。

下記のコードをGemfileに追加します。バージョンは4.1.3に指定しています。

Gemfileを編集した時は、gemfile.lockを更新するために、bundle install をすることによって追加したgemを反映させます。Gemfileは必要なgemリストでGemfile.lockには実際にインストールしたgemリストが入っております。

$ bundle install

これでgemを追加できました。

app/assets/stylesheets/内にapplication.scss を作成する


次に、app/assets/stylesheets/内にapplication.scssというファイルを作成します。

(app/assets/stylesheets/内にあるapplication.cssというファイルはapplication.scssに名前を変更します)

作成したら、そのファイル内で下記のコードを追加します。下記のコードはbootstrapをimportする(使えるようにする)という指示です。 application.scssファイルを以下のように編集してください。

app
└── assets
    └── stylesheets
        └── application.scss  #scc → scssと変更する

app/assets/javascripts/application.jsにコードを追加する


app/assets/javascripts/application.jsに以下のコードを追加します。下記はjquery3とpopperとbootstrap-sprocketsを使えるようにするという指示です。

それぞれBootstrapを使うために必要なライブラリになります。読み込みの順番も関係があるので下記の順で読み込みましょう。

cssの場合はimportで読み込みましたが、jsの場合はrequireを使って読み込みます。

の3つを追加します。

このときの注意点として、すでにかかれている

が一番下になるように、追記してください。

理由としては、require_tree . で読み込むものはjquery3などのコードが読み込まれてからでないとエラーが起きるものがあるからです

app/assets/javascripts/application.jsに以下のコードを追加してください。

app
└── assets
    └── javascripts
        └── application.js


以上でBootstrapの導入は終了です。

CDNを使ったfont-awsomeの導入


次に、app/views/layouts/application.html.erbにfont-awsomeもCDNを使って追加します。

CDNとは、Content Derivery Networkの略で、ファイルサイズの大きいデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワークのことです。

追加するスクリプト以下のfontawsome公式サイトから取得します。

fontawsome公式サイト

viewportの設定


ついでに同じようにapp/views/layouts/application.html.erbにスマホ対応を行うためのviewportの設定も追加しましょう。width = device-widthにすると、端末画面の幅に合わせることが出来るのでスマホにフィットしたサイズになります。 viewportを設定しないとスマホでサイトを開いてもPCのサイズで表示されしまいます。

参考)

もう逃げない。HTMLのviewportをちゃんと理解する


app
└── views
    └── layouts
        └── application.html.erb

以下ではBootstrapのCDNファイルの上に追加しております。


上記が完了したらBootstrap・fontawsomeの導入とviewportの設定は終了です。

議論
0 質問
このコースの評価は?