Rails5に日本語を美しく表示できるBootstrapテーマ「Honoka」を導入! #rubybg


今回は、日本語を美しく表示できるBootstrapのテーマ「Honoka」をRails5に導入したいと思います。

Bootstrapとは

デザインに関するプリセット(事前定義)が集まったCSSフレームワークです。
Bootstrap以外にも有名なCSSフレームワークは、Foundation、Pure、Materialize等があります。

Bootstrap3からは、様々なデバイスのサイズにも最適化できるレスポンシブデザインにも対応しています。
HTMLのidやclassをタグに適用して、簡単にデザインを整えることが出来ます。

環境

Rails5.0.1

「Honoka」をダウンロード

最新版をダウンロードします。
今回は、「Honoka v3.3.7-a」の「bootstrap-honoka-3.3.7-a-dist.zip」をダウンロードしました。

ダウンロードしたフォルダを解凍するとこんなファイル群です。

Railsプロジェクトにコピー

fontsディレクトリはそのまま、Railsプロジェクトのassetsディレクトリにコピーするだけで大丈夫です。

コピー元コピー先
css/bootstrap.min.cssassets/stylesheets/bootstrap.min.css
js/bootstrap.min.jsassets/javascripts/bootstrap.min.js
fontsassets/fonts

Bootstrapの読み込み

bootstrap.min.js を読み込むために、下記のファイルに追加します。

app/assets/javascripts/application.js

... 
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min <-追加します
//= require_tree .

bootstrap.min.css を読み込むために、下記のファイルに追加します。

app/assets/stylesheets/application.css

... 
 *
 *= require bootstrap.min <-追加します
 *= require_tree .
 *= require_self
 */

サーバを起動して確認

サーバを起動してフォントが変わっているか確認します。

bundle exec rails s  

Bootstrap導入前

Bootstrap導入後


フォントが変更されていることが確認できます。
完了です 🙂

Ruby on Railsおすすめ書籍

Ruby on Railsの勉強で参考になった書籍です!

Ruby on Railsで質問したい!

Teratail(テラテイル)

WEBエンジニア専用のQ&Aサイトで、RubyやRailsも質問することができます。活発に質問と回答がされていますので、会員登録をして利用してみると良いと思います(^o^)。

エンジニアのためのQ&Aサイト【teratail】

Ruby on Railsが学べるオンラインスクール

好きな場所で好きな時間に受講できるオンラインスクール!最近は、Ruby on Railsも学ぶことができます!

TechAcademy(テックアカデミー)

オンラインでの週2回マンツーマンでのメンタリング、毎日15〜23時のチャット・レビューサポートで短期間で未経験からオリジナルサービスを開発できるようになる学習プログラム。オリジナルサービスをHerokuを使って公開するところまでを行います。

オンラインブートキャンプ Webアプリケーションコース