教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
最低限のデザインを整えるためにはBootstrapはとても便利なので使用します。
アイコンをつけるだけでかなり見栄えが良くなるので、気軽にアイコンを使えるfont-awesomeも使用します。
まずGemfileを以下のように編集してください。
Copied!bigtweet2
└── Gemfile
ruby123456789101112131415 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
scss123 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
js123456789101112 Copied!・
・
・
//= require rails-ujs
//= require activestorage
//= require turbolinks
// ---ここから追加---
//= require jquery3
//= require popper
//= require bootstrap-sprockets
// ---ここまで追加---
//= require_tree .
このときの注意点として、すでにかかれている以下のコードが一番下になるように、追記してください。
js1 Copied!//= require require_tree .
以上で今回のパートは終了です。
お疲れ様でした。