簡単で便利なFlatUIの導入方法と使い方をなるだけわかりやすく解説するよ！

Flat-UIとネーミングがそのまんまなシンプルなUIキットが結構前に話題になって、はてなブックマークホットエントリー入りとかも果たしていたのですが自分はつい最近になってようやくその便利さを知りました。

このflat-UI、トップページを見ればどんな雰囲気のUIなのかは一瞬で把握できるのですけども、解説とかが全然無くてとっつきにくいんですよ。

そもそもFlat UIとはなにか

上にも書いたとおり、一時期話題になったフラットデザインのUIキットです。

Flat UIのページデスクリプションには

Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version.

（超雑訳：”Flat UI kit Free”はTwitter Bootstrapを利用したデザイン・テーマです。このレスポンシブフレームワークはPSDバージョン，HTMLバージョンの２種類を用意しています。）

とあります。かの有名な(Twitter)Bootstrapのプラグインみたいな位置づけのようです。

Flat UI – Free Bootstrap Framework and Theme

Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version.

http://designmodo.github.io/Flat-UI/

前準備

Flat UIの公式ページからダウンロードと解凍を済ませたら、まずはその中のdistという名前のフォルダを開きましょう。

このフォルダに入っているcss,fonts,img,jsが必要なファイルなので、Flat UIを導入したいhtmlファイルがあるフォルダにコピーしましょう。その際に必要の無いファイルは省いても大丈夫です（圧縮されていない方のcss/jsとか）

html内に読み込む

htmlでFlat UIとBootstrapを読み込みます。早い話、下記のソースをhead内にコピーするだけでおｋです。(ファイルのパスは自分の環境に合わせて変えてください)

<!-- Bootstrapの読み込み -->
<link href="css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Flat-UIの読み込み -->
<link href="css/flat-ui.css" rel="stylesheet">

<!-- 旧バージョンIE用 -->
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->

導入すると、marginとpadding,フォントなんかが調整されて心なしか洗練されたイメージに（ホメオパシー）