Speee DEVELOPER BLOG

Speee開発陣による技術情報発信ブログです。 メディア開発・運用、スマートフォンアプリ開発、Webマーケティング、アドテクなどで培った技術ノウハウを発信していきます！

今更聞けないBootstrapのレスポンシブ Bootstrap 4 beta 対応版

Bootstrap フロントエンド技術

この記事は Bootstrap 3 〜 4 beta までを対象としています。2018 年に公開された Bootstrap 4 正式版に対応する情報については、新しく公開された記事 続・今更聞けない Bootstrap 4 のレイアウトシステム with Flexbox をご覧ください。

tech.speee.jp

お久しぶりです。北の双剣エンジニアです。

もはや昨今のWeb開発には、CSSフレームワークの存在が欠かせません。
Speeeでは、主に社内で稼働するシステムを中心に、多くのプロダクトで Bootstrap が採用されています。

今回は、今更聞けないBootstrapのレスポンシブと題して、Bootstrap の基本要素である "レスポンシブ" を、もう一度、イチから見直してみたいと思います。

Bootstrap の強力さにどっぷりと身を委ねるためには、フレームワークのレイアウトを司る『レスポンシブ』および『グリッド』に、上手に付き合えるかどうか にかかっていると言っても過言ではありません。

目次

Bootstrap とは

f:id:yusaku-hatanaka:20160113005708j:image:w332

Bootstrap は、2011年、Twitter社 によって公開された CSSフレームワークです。元々は Twitter で使用されていたコンポーネントで、汎用性をより高めてフレームワーク化したものが Bootstrapです。

シンプルなクラス定義で、必要十分かつ強力なコンポーネントを使用でき、今となっては 『CSSフレームワークといえば Bootstrap』 というほどに定番化しました。日本語資料も豊富です。

競合フレームワークには Foundation、Pure などがありますが、「いろいろフレームワークを使ってみたけど、一周回ってBootstrapに戻ってきた」という方も多いのではないのでしょうか。

対象バージョン

本記事では v3 を主な対象とします。

また、2015年8月19日に Bootstrap のメジャーバージョンアップ版である v4.0.0 alpha版 が公開されました。本記事は v4対応版 として、v4で仕様の異なる点も 随時解説していきます。

なお、本記事執筆時点 (2015年11月時点) で v4 は開発中のバージョンであり、beta版 (2017年公開) および正式版の仕様は異なるものになっている可能性が高いです。v4 に関する記述は、注釈の無い限り、v4.0.0-alpha の仕様に基づいた解説であることをご理解のうえでご覧ください。

フレームワークは正しく使え!

別に Bootstrap に限った話ではありませんが、フレームワークという開発者を誘惑する言葉には、常にこんな幻想がつきまといます。

幻想の例

...

もちろん、フレームワークを使うだけで、上記のような幻想が何もかも解決するという事はありません。

Bootstrap が持つ "流儀" (スタイルガイド) を正しく把握しなければ、1ランク上のWebアプリケーションにはなりません。フレームワークのツボをしっかり抑えて使いこなすことが、フレームワークを最大限に活用する鍵です。

レスポンシブって？

responsive 【形容詞】

[1] a - すぐ応答[反応]する，敏感な.  
    b - 〔…に〕よく反応して，敏感で 〔to〕.

... 英和辞書 Weblio より

Bootstrap で一番のポイントになる機能が 「レスポンシブ」 です。一言で言ってしまえば、「画面幅に応じて、レイアウトが動的に変化するWebデザイン」を実現する機能です。

何故レスポンシブなのか？

今更感もある話題ですが、おさらいも兼ねて。

「携帯端末でも、PCと同じサイトを見る」という考え方は、10年前はマイノリティでしたが、今となってはもはや当たり前です。しかし、画面の狭い携帯端末でも、PCと同じ画面表示をされては、文字が小さかったり、リンクやボタンも小さくて押しづらかったりと、利用者にとってはストレスが溜まる要因にもなります。

そこで、『画面幅に応じて、Webページのレイアウトが動的に変化する』 という考え方を取り入れたWebデザインが、レスポンシブ・デザインです。いかなる端末の、いかなるサイズのブラウザにおいても、その画面サイズに応じて一番最適なWebページになるように、CSSでレイアウトを調整し、最適なUI/UXを提供する、という考え方です。マルチデバイスを実現するために、デバイスに応じた複数のHTMLを用意しなくても良いため、管理もらくちんです。

Google は、モバイルフレンドリーなサイトの構築方法として、レスポンシブWebデザインを推奨 しており、マルチデバイスに最適化されたWebページの制作手法としてスタンダードなものとなっています。

Bootstrap のレスポンシブ

Bootstrapでは、レスポンシブを実現するために、あらかじめ定められた数段階の画面幅に応じて、表示を変化させるための HTML クラス が存在します。

<!-- 例: 基本は全体の50%の横幅だが、画面幅が小さい時だけ横幅いっぱいに使う -->
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      こんな感じ
    </div>
  </div>
</div>

このクラスを上手に扱う事で、"1つのHTMLソース" で、デバイスによるUXの違いを吸収することができるようになります。

f:id:yusaku-hatanaka:20160113005710j:image:w732

...Bootstrap 公式サイトより http://getbootstrap.com/

Bootstrap v3 の画面幅

Bootstrap v3 では、予め定められた画面幅・サイズとして、以下の4段階が定義されています。サイズの定義は頻繁に使用するので、是非覚えておきましょう。

サイズ 主な使用用途 画面幅 (px)
lg テレビ、デスクトップPCなどの大画面モニタ 1200px以上
md ノートパソコンなどの省サイズモニタ 992px以上
sm タブレットなど 768px以上
xs ファブレット、スマートフォンなど 768px未満

Bootstrap v4 の画面幅

Bootstrap v4 では、新たに xl サイズが追加されています。一見すると lg より大きな画面幅のようですが、実際には xs より小さな画面幅が追加されており、xs 以上のサイズが格上げされています。

また、画面幅の単位も em になり、文字サイズからの相対値となりました。v3 相当の画面幅はしっかり残っているので、サイズの定義の変化さえ注意すれば、違和感無く v3 から v4 へ移行できます。

v3 v4 主な使用用途 画面幅 (px)
lg xl テレビ、デスクトップPCなどの大画面モニタ 1200px以上
md lg ノートパソコンなどの省サイズモニタ 992px以上
sm md タブレットなど 768px以上
xs sm ファブレットなど 576px以上
- (xs) スマートフォン、組み込み端末など 576px未満

追記: 初版の Bootstrap 4 alpha では em が使われていましたが、alpha 2 以降ドロップされており、Bootstrap 3 と同様の ピクセル指定 となっています。

グリッドシステム

Bootstrap のレスポンシブを使いこなすためには、グリッド の概念も知っておかなければなりません。

Bootstrap では、定義されている画面幅を 12個のグリッド に分割する レイアウトシステムを保持しており、HTMLクラスによって、その要素が "いくつ分のグリッド幅で要素を表示するのか" をコントロールすることができます。

f:id:yusaku-hatanaka:20160113005715j:image:w594

例えば、2個分+10個分のグリッド幅を組み合わせて、良くある「サイドバー＋コンテンツ」を実現したり、
左右に等間隔のグリッドを作り、中央寄せをしてみたりと、自由度の高いコンテンツレイアウトが出来るようになります。

f:id:yusaku-hatanaka:20160113005718j:image:w590

Bootstrap 2 までは レスポンシブはオプション的な扱いだったのですが、Bootstrap 3 以降は、レスポンシブとグリッドが統合され、その真価を発揮するようになりました。実例を見ながら、Bootstrap のレスポンシブを活用していきましょう。

追記 (2017/12/10): 現在公開されている Bootstrap 4 beta 版では、12個のグリッドを使う仕組みは同様ですが、CSS の Flexbox を使用したグリッドシステムに変わったことで、より柔軟なレイアウトを実現できるようになりました（縦横揃え、表示順設定など）。

レスポンシブを正しく使うために...

Bootstrap 初心者からよく上がる嘆きの声として、「なんかちょっとズレる!!」といった声があります。具体的に多いのは、左右のスペースが無くなってしまったり、右側にはみ出て横スクロールバーが出てきてしまったり...。

それもそのはず、レスポンシブは何処でも生きられる訳では無く、それ相応の準備をした上で使用しないといけません。1

【鉄則】コンテナクラスを確実に置こう

container クラスは、Bootstrap が定義するコンテナ要素です。レスポンシブデザインは、このコンテナ要素の中でのみ、正しく効果を発揮します。

もし container の外に レスポンシブやグリッドなどの要素を置くと、要素の位置がズレたり、画面幅が正しいものにならなかったりと、様々な弊害を生む可能性があります。レスポンシブ要素や グリッドシステムが ちょっと変な挙動をしている場合は、この辺りを疑ってみましょう。

正しい使い方

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            正しい使い方
        </div>
    </div> <!-- /.row -->
</div><!-- /.container -->

間違った使い方

<div class="container">
    ...
</div><!-- /.container -->

<div class="col-xs-6">
    間違った使い方 (コンテナの外)
</div>

2種類のコンテナ: container / container-fluid

Bootstrap のコンテナは container と container-fluid の2種類が存在し、コンテナをどう扱うかが異なります。Webページに合わせて、最適なコンテナを選択してください。

f:id:yusaku-hatanaka:20160113005720j:image:w480

  • container
    • 固定幅コンテナ
    • コンテナ要素の幅は、表示画面に収まるサイズで決められた画面幅 (xs, sm, md...) に自動的に調整される。
    • 画面の横幅が崩れないので、制作者が意図した通りのレイアウトができる。
  • container-fluid
    • 可変幅コンテナ
    • コンテナ要素の幅は、常にブラウザの横幅いっぱいに広がって表示される。
    • ブラウザの画面全体を使ってコンテンツを表示させたい場合に効果的。

レスポンシブ＆グリッドの使い方

基本の使い方

まず、コンテナ要素の中に row クラスを定義したブロック要素を置きます。row クラスが定義されたブロック要素から、レスポンシブ要素が外に飛び出ることは基本的にありません。

<div class="container">
    <div class="row">
        ...
    </div> <!-- /.row -->
</div><!-- /.container -->

このブロック内に、 col-[画面サイズ]-[グリッド数] のルールで定義されるクラスを持った要素を配置していきます。

[画面サイズ] には、lg, md, sm, xs (v4では xl も可) のいずれかが指定できます。ここで指定した画面サイズ "以上" にブラウザの表示領域が拡大すると、この要素は [グリッド数] で指定したグリッド数分の横幅で、要素が表示されます。

追記 (2017/12/10): Bootstrap 4 beta 版では、xs サイズは HTML クラスで指定する必要が無くなりました。col-xs-12 は col-12 と表記します。この記事の Bootstrap v4 は alpha 版準拠のため、beta 版を使用している場合は読み替えてください。

具体例

言葉では伝わりづらいので、具体例を見てみましょう。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <p>こんにちは</p>
        </div>
        <div class="col-md-4">
            <p>こんにちは</p>
        </div>
        <div class="col-md-4">
            <p>こんにちは</p>
        </div>
    </div>
</div>

col-md-4 クラスが指定された div 要素が 3つ 並んでいます。

この状態で、 md のサイズ以上 (v3: 992px 以上 / v4: 62em 以上) にブラウザ幅を広げると、4グリッド分の横幅を持ったブロック要素が、3つ横並びに表示されます。

f:id:yusaku-hatanaka:20160113005723j:image:w642

一方、 md のサイズ未満 (v3: 992px 未満 / v4: 62em 未満) にブラウザ幅を狭めると、通常のブロック要素のように、コンテナ要素の幅全体まで幅を使うようになります。今度は3つの要素が縦並びになりました。

f:id:yusaku-hatanaka:20160113005725j:image:w484

これにより、「指定した画面サイズ以上で、指定した幅のグリッドシステムを反映する」 という動きが実現できているのがわかります。 Bootstrap では、このグリッドが適用されるかどうかが切り替わる画面サイズを ブレイクポイント (Breakpoint) と呼びます。

いかなる時も常にグリッドを使用したい！という場合は、最小サイズである xs を使用することで、常時グリッドシステムを使用できます。

重ねがけによる可変レイアウト

ブレイクポイントは、複数の画面サイズであれば、重ねて指定することができます。例えば、以下の例を考えてみましょう。

  • スマートフォンの画面サイズでは、2分割のカラム にしたい
  • タブレットの画面サイズでは、3分割のカラム にしたい
  • PCの画面サイズでは、4分割のカラム にしたい

ややこしいですねぇ。もし手書きでHTMLを書いていれば、とっさにJavaScriptの出番になるような要件だと思いますが、グリッドシステムのおかげで、クラスを定義するだけで済みます。整理すると…

  • スマートフォン
    • xs サイズで2分割
    • 12÷2 = 6 → col-xs-6 を指定
  • タブレット
    • sm サイズで3分割
    • 12÷3 = 4 → col-sm-4 を指定
  • PC
    • md サイズ以上で4分割
    • 12÷4 = 3 → col-md-3 を指定

これらのクラスを、それぞれの要素に同時に定義します。

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <p>1</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <p>2</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <p>3</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <p>4</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <p>5</p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <p>6</p>
        </div>
    </div>
</div>

これで 画面幅に応じて 自動的に分割カラム数が変化するようになりました。

f:id:yusaku-hatanaka:20160113005726j:image:w947

ちなみに、CSS の float のように、12個分のグリッドを使い切ると、空いたスペースに回り込まれます。これを応用すれば、以下のようなよくある画像ギャラリーのようなレイアウトも、レスポンシブなグリッドを維持したまま簡単に実現できます。

f:id:yusaku-hatanaka:20160113005728j:image:w640

グリッドの位置をずらす (offset)

中央に寄った要素を作るために、わざわざ空の要素を置く必要はありません。オフセットを使用することで、指定した個数分、グリッドをずらして配置することが可能です。

col-##-offset-xx を使用すると、xx (0～12) 個分のグリッド幅分だけ、要素の左側にスペースを作ることができます。

例

"十分に画面幅が取られている時だけ" 中央寄せにしてみましょう。

<!-- [例] md サイズ以上の画面幅で、ボックスを中央に寄せる -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <p>md サイズ以上で、要素が真ん中に寄る</p>
        </div>
    </div>
</div>

f:id:yusaku-hatanaka:20160113005730j:image:w760

md サイズ以上の幅の時だけ、左右に広々と余白が生まれました。

解説

  • md のサイズ以上に 横幅を広げた場合...
    • 要素の横幅が画面の約半分になり、中央に寄って表示される
    • col-md-6 が定義された要素を 右に3個分 offset することで、左右3個分の空白となり、中央に寄ったように見える。
  • md のサイズ未満に 横幅を縮めた場合...
    • 要素の横幅は画面全体まで伸びる。

グリッドの並びを入れ替える (push/pull) (v3のみ)

グリッドを使用して、以下のような「サイドバー＋コンテンツ」という構成のページを作成したとしましょう。

f:id:yusaku-hatanaka:20160113005735j:image:w533

<div class="container">
    <div class="row">
        <div id="sidebar" class="col-sm-3">サイドバー (Left)</div>
        <div id="contents" class="col-sm-9">コンテンツ (Right)</div>
    </div>
</div>

開発も終盤に差し掛かったところで、『サイドバーの場所を、左右切り替えられるようにしたいんだけど……』 と要望されました。場所を入れ替えるだけなら、タグの順序を入れ替えるだけなのですが、切り替えも考えると 中々そうはいきません。

さて、どうすれば良いでしょう？

 

…

実は、Bootstrap なら クラスをそれぞれ1個ずつ追加するだけで、簡単に左右を入れ替えられます。

<div class="container">
    <div class="row">
        <div id="sidebar" class="col-sm-3 col-sm-push-9">サイドバー (Left)</div>
        <div id="contents" class="col-sm-9 col-sm-pull-3">コンテンツ (Right)</div>
    </div>
</div>

追加したのは、以下の2つのクラスです。

  • col-##-push-*
    • * (1~12) 個分のグリッド幅分だけ、要素を "右" にずらす
    • col-sm-push-9 で、左のサイドバーを 9グリッド分 右へ
  • col-##-pull-*
    • * (1~12) 個分のグリッド幅分だけ、要素を "左" にずらす
    • col-sm-pull-3 で、右のコンテンツを 3グリッド分 左へ

結果、以下のような動きで左右が入れ替わります。

f:id:yusaku-hatanaka:20160113005736j:image:w396

楽勝ですね!

追記 (2017/12/10): Bootstrap v4 beta での廃止

Bootstrap 4 beta 版では、Flexbox の order による並び替えができることから、push / pull は廃止されました。配置の入れ替えを行いたい場合は、代わりに order(-##)-* を使います。

<div class="container">
    <div class="row">
        <div id="sidebar" class="col-sm-3 order-sm-2">サイドバー (Left)</div>
        <div id="contents" class="col-sm-9 order-sm-1">コンテンツ (Right)</div>
    </div>
</div>

offset と push/pull の違い

一見すると、offset と push/pull の機能は良く似ていますが、決定的な違いは、「他の要素に影響が出るか否か」です。

offset は 他の要素に影響が出る
offset を使用した場合は、『offset サイズ + 指定したグリッド幅分のサイズ』 が、その要素が確保する合計のサイズになります。よって、後続する要素も、この合計サイズに応じて位置が変化します。
push/pull は 他の要素に影響しない
push/pull は、単純に指定されたグリッド幅数分、要素が左右に移動するだけです。後続の要素の位置は、本来のグリッド幅のみで計算されるので、push/pull で指定した値は影響しません。

ヘルパークラス

レスポンシブはグリッドだけではなく、通常のHTML要素にも使用できます。

Bootstrap では ヘルパークラス と呼ばれるクラスが存在し、レスポンシブの画面幅に応じて、HTML要素の 表示/非表示 を切り替えることができます。

Bootstrap v3 のヘルパークラス

f:id:yusaku-hatanaka:20160113005739j:image:w346

... CSS · Bootstrap より

  • hidden-##
    • ## で指定された画面サイズの時 のみ、指定された要素を非表示にする。
  • visible-##-*** (非推奨)
    • ## で指定された画面サイズの時 のみ 、指定された要素を *** で指定された CSS display オプションで表示する。
    • *** = block, inline, inline-block のいずれかを指定できる。

注意

  • ヘルパークラスで指定される画面サイズは、その画面サイズ "のみ" を示す
    • 例えば hidden-xs を指定しても、xs 以外の画面サイズ (sm, md, lg) では hidden は 反映されない (表示されてしまう) ので、グリッドとの画面サイズの扱いの違いに注意しましょう。
  • visible 系のヘルパークラスは 非推奨
    • v3.2.0 以降より、visible 系のヘルパークラスは 非推奨 になっています。これは table など、要素に固有な display CSS の指定ができない事に起因するものです。ただし、v4 beta では廃止どころがサポートが拡充されています（後述）ので、そのまま使っても v3 → v4 アップデートにそれほど影響は無いでしょう。

Bootstrap v4 alpha のヘルパークラス

Bootstrap v4 alpha では visible 系のヘルパークラスは実装されなくなり、hidden 系のみとなりました。

また、選択には down (以下) と up (以上) の仕組みが導入され、より直感的に表示をコントロールできるようになっています。

  • hidden-##-down
    • ## で指定された画面サイズ 以下 の時に、指定された要素が非表示になる。
  • hidden-##-up
    • ## で指定された画面サイズ 以上 の時に、指定された要素が非表示になる。

追記 (2017/12/10): Bootstrap v4 beta

Bootstrap v4 beta でヘルパークラスの刷新が行われました。CSS の display プロパティに合わせたクラス指定に変更され、d-none クラスを当てることで display: noneを当てることができるようになります。

設定可能な値も、block inline のみならず table 系や flex も使用できるようになりました。（これにより、廃止予定だった v3 の visible 系クラスもそのまま移行できるようになります）。

一方、down/up の仕組みは無くなり、常に指定された画面サイズ 以上 で有効になるように変更されました。従来通り、指定サイズのみで非表示にしたい場合は、d-(##-)none を指定した上で、1つ上のレベルの画面サイズで d-##-block d-##-inline などで表示を明示する必要があります。

使用例: レスポンシブな br タグの制御

「とある事情で PCサイトでは br タグで意図して改行を入れているけど、スマホで見ると改行の位置が不格好…」なんて話は、割とよく遭遇するケースではないでしょうか。そもそも br なんて使うなって話は置いといて…

<p>
  もはや昨今のWeb開発には、CSSフレームワークの存在が欠かせません。<br />
  Speeeでは、主に社内で稼働するシステムを中心に、多くのプロダクトで Bootstrap が採用されています。
</p>

この br タグを、スマートフォンの表示幅 (今回は xs) で改行されないようにするためには、以下のように br タグにクラスを定義します。

Bootstrap v3

<p>
  もはや昨今のWeb開発には、CSSフレームワークの存在が欠かせません。
  <br class="hidden-xs" />
  Speeeでは、主に社内で稼働するシステムを中心に、多くのプロダクトで Bootstrap が採用されています。
</p>

Bootstrap v4 alpha

<p>
  もはや昨今のWeb開発には、CSSフレームワークの存在が欠かせません。
  <br class="hidden-xs-down" />
  Speeeでは、主に社内で稼働するシステムを中心に、多くのプロダクトで Bootstrap が採用されています。
</p>

Bootstrap v4 beta

<p>
  もはや昨今のWeb開発には、CSSフレームワークの存在が欠かせません。
  <br class="d-none d-sm-inline" />
  Speeeでは、主に社内で稼働するシステムを中心に、多くのプロダクトで Bootstrap が採用されています。
</p>

まとめ

駆け足で説明してまいりましたが、Bootstrap の レスポンシブ/グリッドシステムを最大限活用することで、様々な画面幅のデバイスで、柔軟かつ思い通りの表示が可能になります。

レスポンシブは Bootstrap の基本とも言える概念です。Bootstrap 公式サイト の ドキュメント (スタイルガイド) をしっかり読み、その思想を正しく理解しましょう。レスポンシブを使いこなすことで、Webサイトの表現の幅が広がること請け合いです。

  1. Bootstrap が意図していない構造でHTMLを書いてしまわないよう、 Bootstrap はちゃんと公式で Bootlint と言う Linter をリリースしており、コンポーネントを正しく使用できているか検証できます。 ↩