カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-2

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.cssapp/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 .

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

お疲れ様でした。