Railsアプリをそれっぽくデザインしたい
Railsにデザインを適用しないと「クソ味気ないアプリ」が完成します。
なんせ、ベースは白黒テキストですからね。
Railsアプリ（デザインなし）
ゼロベースでサイト制作すると、いかにCSSの力を思い知らされます。
しかしながら、そうは言っても、ゼロからデザインするのは難しいです。
これまでプログラミングを勉強してヘロヘロなのに、
「はい、じゃあゼロからデザインを学んでセンス発揮して〜」
ではあまりにも残酷すぎますから。
そこで、使いたいのが「Bootstrap 4」というライブラリです。
非デザイナーでも簡単にデザインできて、それっぽくWebアプリを仕上げられるのですよ。
RailsアプリにBootstrap 4を導入する方法
Bootstrap 4をRailsアプリに導入する方法を紹介します。
利用環境は以下の通りです。
| Rails バージョン | 2.5.0 |
|---|---|
| Ruby バージョン | 5.2.4.1 |
gemを追加
まずはgemを追加。
Gemfileを開いて、次の2行を最後に追記しましょう。
gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails'
上書き保存したら、いつも通り
$ bundle install
を発動してgemをダウンロード。
「application.css」を「.scss」にリネーム
Railsアプリ中のapplication.cssというファイルの拡張子をscssに変更。
以下のコマンドでリネームできますね。
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Railsアプリのディレクトリで発動します
「application.scss」にBootstrap 4をインポート
さっき名称を変更したapplication.scssにBootstrap 4をインポートします。
具体的な方法は、
*= require_tree . *= require_self
を削除して、
一番最後に
@import "bootstrap";
を追記すればオッケーです。
したがって、application.scssは次のようになるでしょう。
/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */ @import "bootstrap";
application.jsにも追記
最後にapplication.jsにも、次の3行を追記して保存。
//= require jquery3 //= require popper //= require bootstrap-sprockets
これら3つをやれば、RailsアプリにBootstrap 4を導入できますよ。
それでは！
Lin
【参考記事】
