こんにちは、okutani(@okutani_t)です。みなさんBootstrap使ってますか？もちろん使ってますよね！？
だって、かんたんにレスポンシブなサイトが作れちゃうし、デザインもすっきりなので使いやすくて良いですもの。ガンガン使っているんじゃないかと思います。
ちなみにBootstrapの概要と使い方は下の記事でまとめてます。Bootstrapがよく分からない人はぜひ参考にしてください。
しかしその反面、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本体をダウンロード。
ダウンロードしたファイルを解凍しましょう。中身は次の構成になっています。
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をブラウザで確認してみます。
ちょっとオシャレな感じの「Hello, world!」が表示されましたね。
書き換えが面倒な人は、上のコードをコピーしてindex.htmlに貼り付けて使ってください。このindex.htmlの中にコードをどんどん書いていきましょう。
では、Flat UIの使い方について説明していきます。
Flat UIのかんたんな使い方
Flat UIで扱える「ボタン」や「フォーム」等のComponentsは、下記の公式サイトから確認できます。ブックマークしておくことをオススメします。
ちなみに「/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>
立体的なボタンも使えます。
<button class="btn btn-embossed btn-primary"> Embossedボタン </button>
primaryやinfoと同じように、inverseという黒色のボタンが使えます。
<button class="btn btn-inverse"> Inverse </button>
チェックボックスの使用例
チェックボックスの使用例を紹介します。
<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>
カッコよくてオシャレで良いですね。
チェックボックスを使うときは、</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>
お好みで使い分けてみましょう。
ラジオボタンの使用例
ラジオボタンもカッコいいですね。
<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>
チェックボックスと同じく、<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 -->
navbar-fixed-topクラスをつけてあげることで、スクロールしてもくっついてくるナビゲーションバーに変化します。
その場合はBody部がすこし隠れてしまうので、次のようにcssで調整しておく必要があります。
body {
padding-top: 70px;
}
まだまだたくさんのComponentsがありますが、ここでは全て紹介しきれないので適宜公式サイトを確認してみてください。
まとめ
Flat UIを使うことで、Bootstrapサイトをオシャレに構築することができるので、とてもオススメです。
特にフラットデザインを使ったBootstrapサイトを構築する際には、重宝するのではないでしょうか。Web関係者の方の参考になれば幸いです。