【Bootstrap】ノンデザイナーだけじゃない！Bootstrapを使用したBootstrap臭のしないレスポンシブデザインのマークアップ方法
こんにちは、毎クール毎クール、
アニメが終わってしまう虚無感と来期アニメが始まる期待感が錯綜し、複雑な心境になる奥田です。
気温もずいぶん高くなってきていよいよ夏ですね！
夏と言えば夏アニメ！
当然ながら夏だって僕は引きこもりますよ〜！
さて、最近は弊社でもレスポンシブデザインの案件がちらほら上がってきました。
流行っていますね〜。
しかしながらレスポンシブデザインはカンプも2〜３パターン用意したり、CSSの記述も多くなってしまったりと、
デザイナーとしてもコーダーとしても手のかかる案件と言えると思います。
そんなときに便利なのがBootstrapです！
どこかで「デザインができない人はBootstrapなどのフレームワークを使うと簡単におしゃれなサイトができます（キリッ）」みたいな記事を読みました。
確かにボタンなど便利なスタイルが用意されているのですが、それだけではないのです！
Bootstrapはグリッドシステムや、レスポンシブユーティリティなど、レスポンシブデザインのサイトをマークアップするのに最適なスタイルが既に用意されています。
その部分だけを使えば簡単にコーディングでき、なおかつ可読性も向上します。
こんなに便利なものはない！
ということで今回は僕がよく使うBootstrapの記述方法を一部ご紹介致します。
目次
はじめてのBootstrap
まずは公式サイトにいきます。
Bootstrap
http://getbootstrap.com/
「え、英語とか読めるし・・・」
っと思った方、大丈夫です！簡単な英語しか書いていませんし日本語のドキュメントも探すと出てきます！
ただし、Bootstrap2と現行のBootstrap3では記述方法が異なるので注意してください！
公式からダウンロードしてもいいのですがCDNが用意されているのでCDNを使用します。
htmlファイルを用意してこんな感じに書きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head>
BootstrapのjsファイルとjQueryが必須なのでbody直下に記述します。
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
あとはHTML5を使用するのでhtml5.jsとレガシーブラウザーのレスポンシブ対応の為Respond.jsをhead内に読み込みます。（※このファイルはCDNじゃないと機能しないそうです。）
<!--[if lt IE 9]> <script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
これで準備完了です！
コンテナー
では基本的なクラスから、
<div class="container"> ... </div>
Bootstrapの中身には.containerにこのように記述されています。
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1200px){
.container {
width: 1170px;
}
}
@media (min-width: 992px)
.container {
width: 970px;
}
}
@media (min-width: 768px)
.container {
width: 750px;
}
}
ブレイクポイントごとに可変し、センタリングするようになっていますね。
もちろん使わなくてもいいですが、このサイズでコンテンツを用意しておけば容易にレスポンシブにできます。
テキスト
次はテキストの整列です。
<div class="text-left">
.text-left
</div>
<div class="text-center">
.text-center
</div>
<div class="text-right">
.text-right
</div>
テキストの整列は規定クラスを作っている方も多いと思いますが、Bootstrap流にはこんな感じです。
リスト＆ディスクリプション
HTMLではよく使うリストですが、スタイルなしや、横並びリストなど用意するのは面倒です。
<!-- 通常のリスト --> <ul> <li></li> ... </ul> <!-- スタイルなしのリスト --> <ul class="list-unstyled"> <li></li> ... </ul> <!-- 横並びのリスト --> <ul class="list-inline"> <li></li> ... </ul>
dlを使用した擬似テーブルも用意されています。
<dl class="dl-horizontal">
<dt></dt>
<dd></dd>
...
</dl>
テーブル
テーブルはマルチクラスを指定することによって様々なスタイルを充てることができます。
<!-- 枠線なし -->
<table class="table">
<thead>
<tr>
<th></th>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
<!-- 枠線あり -->
<table class="table table-bordered">
<thead>
<tr>
<th></th>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
<!-- 枠線あり + ストライプ -->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
テーブルはレスポンシブにした際にセルが小さくなって文字が読みにくくなったり、何かと厄介です。
その為の回避方法もBootstrapは用意してくれています。
<!-- レスポンシブ対応テーブル -->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
</div>
このようにテーブルを.table-responsiveでネストしてあげるとスマホで見た際に、横スクロールが出てくれます。
サムネイル画像
画像のサムネイルを表示する際に使えそうなスタイルです。
<!-- 角丸 --> <img src="..." class="img-responsive img-rounded" alt=""> <!-- 円 --> <img src="..." class="img-responsive img-circle" alt=""> <!-- 角丸 + ボーダー --> <img src="..." class="img-responsive img-thumbnail" alt="">
レスポンシブユーティリティ
さて、いよいよここからがBootstrapの真価を発揮できるところです。
Bootstrapには4つのブレイクポイントをそれぞれのクラスを与えることで指定できます。
- xs ・・・ スマートフォン
- sm ・・・ タブレット
- md ・・・ PC(1200px以下)
- lg ・・・ PC(1200px以上)
このルールを覚えてしまえばさほど難しくはありません。
例えばタブレットまでは表示してスマホでは非表示にしたい。なんてこともクラスを充てることで簡単にできてしまいます。
<div class="hidden-xs">
.hidden-xs
(スマホで768px以下で非表示)
</div>
<div class="hidden-sm">
.hidden-sm
(タブレット 992px以下で非表示)
</div>
<div class="hidden-md">
.hidden-md
(PC 1200px以下で非表示)
</div>
<div class="hidden-lg">
.hidden-lg
(PC 1200px以上で非表示)
</div>
表示する際はblockで表示か、inline-blockで表示か、inlineで表示かを指定します。
<div class="visible-xs-block"> .visible-xs-block (スマホで768px以下でブロック表示) </div> <div class="visible-sm-block"> .visible-sm-block (タブレット 992px以下で表示) </div> <div class="visible-md-block"> .visible-md-block (PC 1200px以下で表示) </div> <div class="visible-lg-block"> .visible-lg-block (PC 1200px以上で表示) </div>
グリッドシステム
グリッドシステムはBootstrapで最もよく使う機能でしょう。
仕組みは、全体を12分割してそのうちのいくつ使用するかを指定します。
<!-- 3カラム -->
<div class="row">
<div class="col-xs-4">
.col-xs-4
</div>
<div class="col-xs-4">
.col-xs-4
</div>
<div class="col-xs-4">
.col-xs-4
</div>
</div>
上記の例は全体12のうち4ずつ指定しているので3カラムになります。
よくある2カラムはこんな感じ。
<div class="row"> <div class="col-xs-9"> .col-xs-9 </div> <div class="col-xs-3"> .col-xs-3 </div> </div>
オフセットを与えることもできます。
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
.col-xs-10 .col-xs-offset-1
</div>
</div>
マルチクラスを充てればタブレットまでは３カラム、スマホでは２カラムと１カラムにするなんてこともできます。
<div class="row">
<div class="col-sm-4 col-xs-6">
.col-sm-4.col-xs-6
</div>
<div class="col-sm-4 col-xs-6">
.col-sm-4.col-xs-6
</div>
<div class="col-sm-4 col-xs-12">
.col-sm-4.col-xs-12
</div>
</div>
最後に
他にもJavascriptを使用したタブや、ツールチップなど様々な機能が備わっています。
しかし、純粋にグリッドシステムやレスポンシブユーティリティを使用する分にはデザイナーとコーダーの良い取り決めになるのではないでしょうか？
今後、レスポンシブデザインが主流になった際にどのフレームワークを使うのかという壁にぶつかると思います。
グリッドシステムはほかのフレームワークも大体同じなので覚えておいて損はないと思います。
