Bootstrap Advent Calendar 2015 – Qiita7日目の記事です。Bootstrapは便利で、特にノンデザイナーなエンジニアでもそれなりにしっかりとしたデザインのサイトが作れるということで、利用している方も多いと思います。ただ使っていて思うのは、用意されている色のバリエーションが少ないということです。Bootstrapで作ったサイトはどれも似通っていると言われてしまうのもそこに原因があるのではないかと思っています。そこで、今回ボタンだけではありますが、使える色やスタイルを拡張するBootstrap用のCSSライブラリを作ったので、この機会に紹介させていただきます。
目次
「cb-materialbtn.css」概要
「cb-materialbtn.css」は、CSSフレームワーク「Bootstrap」の（主に）ボタンの色やスタイルを拡張するためのCSSライブラリとなります。Googleの提唱するデザインガイドライン「Material Design（マテリアルデザイン）」で定められた色やスタイルをBootstrapのボタンに適用させることを可能とします。
「cb-materialbtn.css」の特徴は以下のとおりです。
- 利用できる色はマテリアルデザインカラーの192色
- 利用できるボタンのスタイルは4タイプ
- 色とスタイルの組み合わせは全部で1,528通り
- しかも、Bootstrapと同様にボタンの要素にセレクター名を1つ指定するだけ
- CSSオンリーで、JavaScriptは使わない
拡張されるMaterial Design（マテリアルデザイン）のボタンについて
マテリアルデザインとは、Googleの提唱するデザインガイドラインで、「現実世界における物質的な素材を使ったデザインルールを、Webやアプリなどのデジタルのデザインの世界に取り入れたもの」です。
- Introduction – Material design – Google design guidelines
- Google の新しいデザインガイドライン「Material Design」 ｜ Developers.IO
当ライブラリは、そのマテリアルデザインで定められた「Floating action button」「Raised button」「Flat button」の3つのボタンタイプをBootstrapのボタンに適用することができます。実装例とコードを紹介します。
Floating action button
Floating action buttonは、円形のマテリアルボタンです。ボタンを押した際に、色の変化と浮遊状態の変化を伴います。テキストの長さに合わせて、円の大きさが決まるようになっています（テキストが長いと大きな円となります）。ボタンの幅と高さは、各々任意で設定してください。
実装例
実装コード
<button class="btn btn-lg btn-pink600_ftg" style="width: 200px; height: 200px;">btn-pink600_ftg</button>Raised button
Raised buttonは典型的なレクタングル（長方形）のマテリアルボタンです。ボタンを押した際に、色の変化と浮遊状態の変化を伴います。
実装例
実装コード
<button class="btn btn-lg btn-cyan700_rsd">btn-cyan700_rsd</button>Flat button
Flat buttonは、色（マテリアルデザインでいう「インク」）のみで作られたフラットなボタンです。ボタンを押した際に、色の変化を伴いますが、浮遊はしません（影はつきません）。
実装例
実装コード
<button class="btn btn-lg btn-indigo800_flt">btn-indigo800_flt</button>ボタンタイプなし
マテリアルデザインのボタンタイプを適用せずに、ただ単にマテリアルカラーを要素の背景色に指定することもできるようにしています。ボタンに限らず、背景色にマテリアルカラーを指定したい要素があれば、ぜひ使ってください。
実装例
実装コード
<button class="btn btn-lg btn-bluegrey100">btn-bluegrey100</button>マテリアルデザインのボタンの仕様は以下をご参照ください。
「cb-materialbtn.css」の実装方法
1. cssファイルをダウンロードする
当ライブラリはGitHubからダウンロードすることができます。zipファイルとなっているので解凍してお使いください。
使用するファイルは以下となります。（「dist」フォルダ内にあります。）
dist/cb-materialbtn.min.css
CDN版も用意しています。手っ取り早く使いたい場合は、以下をコピーしてお使いください。
https://cdn.rawgit.com/maechabin/bootstrap-material-button-color/master/dist/cb-materialbtn.0.5.5.min.css
2. cssファイルを読み込む
使用するライブラリは「distフォルダ」内にあります。bootstrap.cssファイルと一緒にページに読み込みます。読み込む順番は必ずbootstrap.cssの後にします。
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="cb-materialbtn.min.css">
3. Bootstrapのボタンを用意する
HTMLファイル内にBootstrapのボタンを用意します。Bootstrapでは、button要素、a要素、input要素のclass属性に“btn”を指定することで、ボタンのスタイルが適用されます。
button要素でボタンを作る場合
<button class="btn">button</button>a要素でボタンを作る場合
<a href="#" class="btn">button</a>input要素でボタンを作る場合
<input type="submit" class="btn" value="button">素の状態のBootstrapボタンができあがります。
4. ボタンのclass属性にセレクター名をセットして、マテリアルデザインカラー（色）を適用させる
当ライブラリを使って、用意したBootstrapのボタンにマテリアルデザインのボタンタイプと色（カラー）を適用させます。Bootstrapと同様、ボタンとなっている要素のclass属性にセレクター名をセットするだけの簡単実装となっています。
セレクター名の構成は以下のようになっています。
btn-<色カテゴリー><色コード><_ボタンタイプ>
【 btn- 】
接頭辞です。Bootstrapのルールに合わせて、セレクター名の頭に必ず付けるようにします。
【 色カテゴリー 】
マテリアルカラーの色を指定します。指定できる色カテゴリーは以下となります。
red pink purple deeppurple indigo blue lightblue cyan teal green lightgreen lime yellow amber orange deeporange brown grey bluegrey black white
【 色コード 】
指定した色カテゴリーの彩度（濃さ）を以下の色コードで指定します。（以下はredを例にしたものです。）
50 100 200 300 400 500 600 700 800 900
- black、whiteの場合は、色の彩度がないため色コードの指定はしません。（例: btn-black_flt）
- マテリアルカラーの色コードA100、A200、A400、A700には現在のところ対応していません。
- マテリアルカラー一覧については以下をご参照ください。
【 ボタンタイプ 】
上で紹介したマテリアルデザインのボタンタイプを指定します。
- _ftg: Floating action buttonタイプが適用されます
- _rsd: Raised buttonタイプが適用されます
- _flt: Flat buttonタイプが適用されます
- 指定なし: ボタンタイプは適用されません
上記のルールを踏まえて、Bootstrapのボタンにセレクター名をclass属性に適用すると以下のようになります。
<button class="btn btn-purple600_rsd">button</button>実装例
【注意】「_ftg: Floating action button」を指定する場合は、ボタンの幅（width）と高さ（height）を各々任意で設定してください。
セレクター名シミュレーター
上記の「色カテゴリー」、「色コード」、「ボタンタイプ」をそれぞれ選択して、セレクター名を生成するツールを作りました。ボタンのデザインも確認できるようになっています。いろいろお試しください。（ちなみに、こちらのツールはReactで作っています。）
色カテゴリーごとにファイルを読み込むことも可能
上で紹介したように当ライブラリは「色とスタイルの組み合わせが全部で1,528通り」あります。そのためファイルの容量もそれなりのものとなっています。かなりがんばって容量削減に努めましたが、それでも圧縮版で150KBほどあります。高解像度な画像を1枚貼ると考えれば、さほど気にすることもないと思いますが、念のため色カテゴリーごとのcssファイルも用意してあります。
ダウンロードした当ライブラリの「dist/color」フォルダ内に色カテゴリーごとのcssファイルが置いているので、使いたい色カテゴリーのものだけを読み込んでお使いいただくことも可能です。
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="/dist/color/cb-materialbtn-amber.css">
<link rel="stylesheet" href="/dist/color/cb-materialbtn-bluegrey.css">
まとめ
CSSオンリーでシンプルに使えることを目指して、今回はJavaScriptは一切使わず、Sassのみで開発しています。なので、あまり融通が利かなく、まだまだ荒削りな部分も多々あります。例えば、Floating action buttonの高さと幅を同じ値に自動で設定できるようにしたかったのですが、ブラウザごとにいろいろ癖があって、現時点では実装できていません。後はもっと容量を削減したいというのもあります。マテリアルカラーの色コード「A***」のものもまだ未対応です。今後はこの辺りを引き続き対応していければと思っています。
ぜひお使いいただき、何かご意見、ご要望などあればお知らせいただけると幸いです。
コメント