【Bootstrap】ノンデザイナーだけじゃない！Bootstrapを使用したBootstrap臭のしないレスポンシブデザインのマークアップ方法

2014.07.04

こんにちは、毎クール毎クール、
アニメが終わってしまう虚無感と来期アニメが始まる期待感が錯綜し、複雑な心境になる奥田です。

気温もずいぶん高くなってきていよいよ夏ですね！
夏と言えば夏アニメ！
当然ながら夏だって僕は引きこもりますよ〜！

さて、最近は弊社でもレスポンシブデザインの案件がちらほら上がってきました。
流行っていますね〜。

しかしながらレスポンシブデザインはカンプも2〜３パターン用意したり、CSSの記述も多くなってしまったりと、
デザイナーとしてもコーダーとしても手のかかる案件と言えると思います。
そんなときに便利なのがBootstrapです！

どこかで「デザインができない人はBootstrapなどのフレームワークを使うと簡単におしゃれなサイトができます（キリッ）」みたいな記事を読みました。
確かにボタンなど便利なスタイルが用意されているのですが、それだけではないのです！

Bootstrapはグリッドシステムや、レスポンシブユーティリティなど、レスポンシブデザインのサイトをマークアップするのに最適なスタイルが既に用意されています。
その部分だけを使えば簡単にコーディングでき、なおかつ可読性も向上します。

こんなに便利なものはない！
ということで今回は僕がよく使うBootstrapの記述方法を一部ご紹介致します。

<!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>

View demo

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流にはこんな感じです。

View demo

リスト＆ディスクリプション

HTMLではよく使うリストですが、スタイルなしや、横並びリストなど用意するのは面倒です。

<!-- 通常のリスト -->
<ul>
  <li></li>
  ...
</ul>

<!-- スタイルなしのリスト -->
<ul class="list-unstyled">
  <li></li>
  ...
</ul>

<!-- 横並びのリスト -->
<ul class="list-inline">
  <li></li>
  ...
</ul>

View demo

dlを使用した擬似テーブルも用意されています。

<dl class="dl-horizontal">
    <dt></dt>
    <dd></dd>
    ...
</dl>

View demo

テーブル

テーブルはマルチクラスを指定することによって様々なスタイルを充てることができます。

<!-- 枠線なし -->
<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でネストしてあげるとスマホで見た際に、横スクロールが出てくれます。

View demo

サムネイル画像

画像のサムネイルを表示する際に使えそうなスタイルです。

<!-- 角丸 -->
<img src="..." class="img-responsive img-rounded" alt="">

<!-- 円 -->
<img src="..." class="img-responsive img-circle" alt="">

<!-- 角丸 + ボーダー -->
<img src="..." class="img-responsive img-thumbnail" alt="">

View demo

レスポンシブユーティリティ

さて、いよいよここからが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>

View demo

グリッドシステム

グリッドシステムは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>

View demo