2018年版bootstrapの使い方!無料テンプレート5選

Twitter社が開発したWEBフレームワーク「Bootstrap」ですが、既に様々なテンプレートが製作されており、それらを使う事でデザインに悩む事なくWEBサイトを作る事ができます。ここでは、お薦めの無料テンプレートを紹介すると共に、Ruby on Railsとの連携方法も記載させていただきます。

bootstrapの無料テンプレート5選

Brandi

Brandi
Brandiは主にビジネス向けのBootstrap対応ワンページ型テンプレートであり、コーポレートサイト、ポートフォリオサイト等に適切でしょう。レスポンシブデザインが施されているためユーザーフレンドリーな事は勿論、GoogleMAPのAPIも組み込まれているので、会社所在地のMAPを簡単に表示する事ができます。その派手な演出効果はユーザーにユニークな印象を与えるでしょう。

AWESOMESS PORTFOLIO

AWESOMESS PORTFOLIO
AWESOMESS PORTFOLIOはその名の通り、ポートフォリオ用のBootstrapテンプレートです。デザインはシンプルに纏められており、スクロールも少ないため、強調したいコンテンツをユーザーに印象づける事ができるでしょう。

Guide

Guide
Guideはランディングページ、ホームページ等の用途に幅広く対応できるBootstrapテンプレートです。スクロールする事で滑らかに各コンテンツが表示されるのですが、特徴的なのはレイアウトオプションが付いています。画面左にあるレイアウトオプションを使用する事によって、ユーザーがテンプレート内の配色やボックスサイズを変更する事が可能となっています。

Magister

Magister
Magisterは余計なものを配置せず、全画面表示されたイメージでインパクトを残すBootstrapテンプレートです。画面左上に配置されたメニューによって画面が切り替わりますが、背景イメージは常に表示されたままなので、ここにどのようなイメージを持ってくるかによって印象ががらりと変わるでしょう。

Agency

Agency
Agencyはシックなデザインが特徴的なBootstrapテンプレートです。今までご紹介させて頂いたテンプレートは演出効果が高いものが多かったのですが、こちらは比較的大人しめな作りになっているため、落ち着いたデザインを好む方にはお薦めです。

Ruby on railsでbootstrapを使う方法

rails上でbootstrapを導入する環境

BootstrapはRuby on Railsで作成したアプリにも適用する事が可能です。RailsはRubyによるWebアプリケーション開発を最適化するフレームワークですが、Bootstrapを用いる事で、基本的なデザイン部分を簡略化する事も期待できます。

gemファイルに追記

それでは、具体的にRailsでBootstrapを使用する方法を見ていきましょう。まず、ターミナルを起動し、

gem ‘bootstrap’, ‘~> 4.0.0.beta3’

と入力します。こちらはBootstrapのバージョンが4.0.0.beta3の場合ですので、最新バージョンがあればそちらを入力しましょう。

また、Rails5.1以上では以下のコマンドも入力します。

gem ‘jquery-rails’

Railsが5.1以上の場合はjQueryが自動的にインストールされていないため、上記のコマンドを入力する必要があります。

インストールコマンドの実行

gemファイルへの追記が終了したら、

bundle install

を行います。そしてアプリ作成時に生成されるapp/assets/stylesheets/application.cssファイルを

mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

とリネームし、「application.scss」ファイル内に

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import “bootstrap”;

と追記します。そして、次にjsファイルとの関係をapp/assets/javascripts/application.jsに

//= require jquery3
//= require popper
//= require bootstrap-sprockets

と追記します。これでひとまずインストールと設定は完了しました。

動作確認

Railsアプリにコントローラーを作成し、そちらのindex.html.erb(若しくはassetsのスタイルシート)に下記のようなタグを記載する事でViewに反映される事が確認できます。

<button type="button" class="btn btn-default">btn1</button>
<button type="button" class="btn btn-primary">btn2</button>
<button type="button" class="btn btn-success">btn3</button>

その際はrails serverを起動する事をお忘れなく。

まとめ

Bootstrapは基本的なレイアウトやデザインをテンプレート任せにする事で、素早くWEBサイトを製作する事ができます。新しいサービスをリリースする際、あるいは、自分のポートフォリオや個人サイトを作る時にも便利ですので、一度Bootstrapの世界を体験してみましょう。

関連記事

ページ上部へ戻る