3分でできる!RailsアプリにBootstrap 4を導入する方法




Railsアプリをそれっぽくデザインしたい

Railsにデザインを適用しないと「クソ味気ないアプリ」が完成します。

なんせ、ベースは白黒テキストですからね。

 

rails bootstrap 導入

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をダウンロード。

 

「application.css」を「.scss」にリネーム

Railsアプリ中のapplication.cssというファイルの拡張子をscssに変更。

以下のコマンドでリネームできますね。

Railsアプリのディレクトリで発動します

 

「application.scss」にBootstrap 4をインポート

さっき名称を変更したapplication.scssにBootstrap 4をインポートします。

具体的な方法は、

を削除して、

一番最後に

を追記すればオッケーです。

したがって、application.scssは次のようになるでしょう。

 

application.jsにも追記

最後にapplication.jsにも、次の3行を追記して保存。

これら3つをやれば、RailsアプリにBootstrap 4を導入できますよ。

 

それでは!

Lin

 

【参考記事】

Pocket
LINEで送る




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍




コメントを残す

メールアドレスが公開されることはありません。