Bootstrap・font-awesomeの導入

最低限のデザインを整えるためにはBootstrapはとても便利なので使用します。

アイコンをつけるだけでかなり見栄えが良くなるので、気軽にアイコンを使えるfont-awesomeも使用します。

まずGemfileを以下のように編集してください。

Copied!
bigtweet2
└── Gemfile

ruby
123456789101112131415
               
Copied!
.
.
.
# 1番下に以下のコードを追加する

# - Bootstrap4
gem 'bootstrap', '~> 4.0.0.beta2.1'

# - jquery
#   Bootstrapを利用する為に必要
gem 'jquery-rails', '~> 4.3', '>= 4.3.3'

# - FontAwesome
#   https://fontawesome.com/
gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.4'

先ほどと同様、Gemfileのインストールを行います。

Copied!
$ bundle install

次に、app/assets/stylesheets/application.cssをapp/assets/stylesheets/application.scssに変更してください。（.cssを.scssに変更)

ファイル名変更後、以下のように編集します。

Copied!
app
└── assets
    └── stylesheets
        └── application.scss

scss
123
   
Copied!
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";
@import "font-awesome";

最後にapp/assets/javascript/application.jsを編集します。

Copied!
app
└── assets
    └── javasctipts
        └── application.js

js
123456789101112
            
Copied!
・
・
・
//= require rails-ujs
//= require activestorage
//= require turbolinks
// ---ここから追加---
//= require jquery3
//= require popper
//= require bootstrap-sprockets
// ---ここまで追加---
//= require_tree .

このときの注意点として、すでにかかれている以下のコードが一番下になるように、追記してください。

js
1
 
Copied!
//= require require_tree .

以上で今回のパートは終了です。

お疲れ様でした。