vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

BootstrapのUIキット「Flat UI」がオシャレでオススメな件

      2017/01/31

LINEで送る
Pocket

bootstrap-flatui
こんにちは、okutani(@okutani_t)です。みなさんBootstrap使ってますか?もちろん使ってますよね!?

だって、かんたんにレスポンシブなサイトが作れちゃうし、デザインもすっきりなので使いやすくて良いですもの。ガンガン使っているんじゃないかと思います。

ちなみにBootstrapの概要と使い方は下の記事でまとめてます。Bootstrapがよく分からない人はぜひ参考にしてください。

Bootstrapの導入方法&初期設定まとめ
こんにちは、okutani(@okutani_t)です。みなさんはBootstrapを知っていますか?Bo...
2015-08-09 20:01
はてブ

しかしその反面、Bootstrapを使っていて困ることは「デザインが被る」「Bootstrapを使っていることがすぐに分かってしまう」「別にそんなオシャレじゃない」などなど。

ちょっとでもそれを感じている人は、ぜひ一度BootstrapのUIキットである「Flat UI」を使ってみてください。上記の問題を一気に解決することができます。

Flat UIを使うことで、元々のBootstrapデザインとは別のUIで、オシャレにサイトを構築することができます。

Flat UIの公式サイトそのもの自体、FlatUIで作られているので、そちらを見ればすぐにどんなUIかチェックできます。後述のリンク先で確認してみてください。

本記事では「Flat UIの導入方法」「初期設定」「かんたんな使い方」をそれぞれ説明しています。

では、さっそくFlat UIの導入方法を確認してみて、実際に手を動かしてみましょう!

スポンサーリンク

Flat UIの導入方法

まずはFlat UIの公式サイトからFlat UI本体をダウンロードしましょう。

LINKFlat UI – Free Bootstrap Framework and Theme

すこし下にスクロールするとダウンロードリンクがあります。そこからFlat UI本体をダウンロード。

bootstrap-flatui

ダウンロードしたファイルを解凍しましょう。中身は次の構成になっています。

bootstrap-flatui2

Flat UI本体がダウンロードできたので、初期設定を行っていきましょう。

Flat UIの初期設定

Flat UIキットの中には、すでにBootstrapが入っています。なので別途Bootstrapのデータを用意することはしなくてOKです。

もしくは、この中の「dist/css/flat-ui.min.css」がFlat UI本体のファイルなので、このファイルを個別で用意したBootstrapのテンプレート内に移して使っていくのもOKです。そこら辺はお好みでどうぞ。

今回はダウンロードしたファイル構成のまま、Flat UIを使っていきます。

ただ、この中にあるindex.htmlの中を覗いてみると、公式サイトと同じHTMLが記述されいるため新規にサイトを作るには不向きです。こちらのindex.htmlは削除して、適切なindex.htmlを作成していきましょう。

index.htmlと同じ階層にある「docs」フォルダ内の「template.html」が、Flat UIのテンプレートファイルです。サイト作成時にはこちらを利用しましょう。

私はソースコードを次のように書き換え、index.htmlにリネームしました。さきほど削除したindex.htmlと同じ、一番上の階層において利用していきましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Flat UI Free 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="dist/css/vendor/bootstrap.min.css" rel="stylesheet">
    <link href="dist/css/flat-ui.min.css" rel="stylesheet">

    <link rel="shortcut icon" href="img/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="js/vendor/html5shiv.js"></script>
    <script src="js/vendor/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <h1>Hello, world!</h1>
    </div>

    <script src="dist/js/vendor/jquery.min.js"></script>
    <script src="dist/js/vendor/video.js"></script>
    <script src="dist/js/flat-ui.min.js"></script>
  </body>
</html>

index.htmlをブラウザで確認してみます。

bootstrap-flatui3

ちょっとオシャレな感じの「Hello, world!」が表示されましたね。

書き換えが面倒な人は、上のコードをコピーしてindex.htmlに貼り付けて使ってください。このindex.htmlの中にコードをどんどん書いていきましょう。

では、Flat UIの使い方について説明していきます。

Flat UIのかんたんな使い方

Flat UIで扱える「ボタン」や「フォーム」等のComponentsは、下記の公式サイトから確認できます。ブックマークしておくことをオススメします。

LINKComponents · Flat UI Free

ちなみに「/docs/components.html」からも同じページがローカル上で確認できます。さらに、「/docs/examples/」の中に、各種パーツごとのサンプルがそれぞれ入っているので、一度確認しておきましょう。

基本的にはBootstrapと同じ書き方をしていれば、Flat UIのデザインが適応されます。しかし、中にはFlat UI独自の書き方がいくつかあります。ここで使い方の例と一緒に、どのようなUIがあるのかをご紹介します。

まずはボタンの使用例から見ていきましょう。

ボタンの使用例

Flat UIでは、lgよりデカいhgが使えます。ボタンで使う場合はbtn-hgとします。

<button class="btn btn-hg btn-primary">
  HUGEボタン
</button>

bootstrap-flatui4

立体的なボタンも使えます。

<button class="btn btn-embossed btn-primary">
  Embossedボタン
</button>

bootstrap-flatui5

primaryやinfoと同じように、inverseという黒色のボタンが使えます。

<button class="btn btn-inverse">
  Inverse
</button>

bootstrap-flatui6

チェックボックスの使用例

チェックボックスの使用例を紹介します。

<form role="form">
  <div class="form-group">
    <label class="checkbox">
      <input type="checkbox" data-toggle="checkbox" value="" required>
      チェック必須のやつ
    </label>
    <label class="checkbox">
      <input type="checkbox" data-toggle="checkbox" checked="checked" value="">
      最初からチェック
    </label>
    <label class="checkbox">
      <input type="checkbox" data-toggle="checkbox" value="" disabled="">
      チェックできないやつ1
    </label>
    <label class="checkbox">
      <input type="checkbox" data-toggle="checkbox" checked="checked" value="" disabled="">
      チェックできないやつ2
    </label>
    <button type="submit" class="btn btn-sm btn-primary">送信!</button>
  </div>
</form>

<script src="docs/assets/js/application.js"></script>

bootstrap-flatui7

カッコよくてオシャレで良いですね。

チェックボックスを使うときは、</body>の上あたりに<script src=”docs/assets/js/application.js”></script>を記述する必要があります。

他にはこんなチェックボックスも使えます(画像はcssで余白を開けています)。

<input type="checkbox" checked data-toggle="switch" name="default-switch">
<div class="bootstrap-switch-square">
  <input type="checkbox" checked data-toggle="switch" name="square-switch">
</div>

bootstrap-flatui8

お好みで使い分けてみましょう。

ラジオボタンの使用例

ラジオボタンもカッコいいですね。

<form role="form">
  <div class="form-group">
    <label class="radio">
      <input type="radio" data-toggle="radio" name="radios" value="0" data-radiocheck-toggle="radio" required>
      チェック必須のやつ
    </label>
    <label class="radio">
      <input type="radio" data-toggle="radio" name="radios" value="1" data-radiocheck-toggle="radio" checked="">
      最初からチェック
    </label>
    <label class="radio">
      <input type="radio" data-toggle="radio" name="radiosDisabled" value="2" data-radiocheck-toggle="radio" disabled="">
      チェックできないやつ1
    </label>
    <label class="radio">
      <input type="radio" data-toggle="radio" name="radiosDisabled" value="3" data-radiocheck-toggle="radio" checked="" disabled="">
      チェックできないやつ2
    </label>
  </div>
  <button type="submit" class="btn btn-sm btn-primary">送信!</button>
</form>

<script src="docs/assets/js/application.js"></script>

bootstrap-flatui9

チェックボックスと同じく、<script src=”docs/assets/js/application.js”></script>を使いましょう。

ナビゲーションバーの使用例

ナビゲーションバーもフラットでオシャレな感じです。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
      <span class="sr-only">Toggle navigation</span>
    </button>
    <a class="navbar-brand" href="#">Flat UIのサイト</a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse-01">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">リンク1</a></li>
      <li><a href="#">リンク2</a></li>
      <li><a href="#">リンク3</a></li>
    </ul>
    <form class="navbar-form navbar-right" action="#" role="search">
      <div class="form-group">
        <div class="input-group">
          <input class="form-control" id="navbarInput-01" type="search" placeholder="Search">
          <span class="input-group-btn">
            <button type="submit" class="btn"><span class="fui-search"></span></button>
          </span>
        </div>
      </div>
    </form>
  </div><!-- /.navbar-collapse -->
</nav><!-- /navbar -->

bootstrap-flatui10

navbar-fixed-topクラスをつけてあげることで、スクロールしてもくっついてくるナビゲーションバーに変化します。

その場合はBody部がすこし隠れてしまうので、次のようにcssで調整しておく必要があります。

body {
  padding-top: 70px;
}

まだまだたくさんのComponentsがありますが、ここでは全て紹介しきれないので適宜公式サイトを確認してみてください。

まとめ

Flat UIを使うことで、Bootstrapサイトをオシャレに構築することができるので、とてもオススメです。

特にフラットデザインを使ったBootstrapサイトを構築する際には、重宝するのではないでしょうか。Web関係者の方の参考になれば幸いです。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
Flat UI、思った以上にオシャレで良いです。夢が広がります。Bootstrapのデザインもう飽きちゃったなー、って人はぜひ試してみてね。

 - Bootstrap

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

Bootstrapのfileアップロードフォームがダサいから装飾してみた

こんにちは、okutani(@okutani_t)です。Bootstrapデフォ …

「ClockPicker」を使ってBootstrapでカッコいい時間入力を実装する

こんにちは、okutani(@okutani_t)です。仕事でカッコいい時間入力 …

Bootstrapの導入方法&初期設定まとめ

こんにちは、okutani(@okutani_t)です。みなさんはBootstr …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。