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が学べるオンライン講座

好きな場所で好きな時間に受講できるオンライン講座!

Udemy(ユーデミー)

オンライン動画学習サイトで、Ruby on Rails講座やRuby講座もあります。一度、購入した動画は繰り返し使えますので何度でも学習可!世界中の人達が講座をアップロードしているので、学びたい講座が必ず見つかる。
世界最大級のオンライン学習サイトUdemy


CodeCamp(コードキャンプ)

現役のRubyエンジニアによる個別指導で、Webサイト制作を基礎から習得できます。無料体験レッスンが受講できるので、気軽に受講体験ができます。
Ruby と Ruby on Railsマスターコース



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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください