もう一度確認しておきたい、Bootstrap3 レスポンシブの基礎知識

Tweet

Pocket

もう一度間違ってないか確認しておきましょう。

I've made a huge mistake

Bootstrap3に限らず、レスポンシブデザインはGoogle検索のSEO効果もあるということで一気に広がっていったわけですが、制作会社ごとの独自フレームワークによる中途半端な実装などの理由もあり、結構対応が大変だそうです。

そういうのを聞くとやっぱりBootstrap3のような安定したフレームワーク使っておくのが楽だよね〜ってことで、ここではもう一度Bootstrap3を使ったレスポンシブレイアウトの作り方を確認しておきたいと思います。

Bootstrap3のレスポンシブレイアウトの作り方

Bootstrap3では前回作ったようなグリッドレイアウトにレスポンシブclassを追加するだけで簡単にレスポンシブレイアウトを作成することができます。

前回はレイアウトを作成する際に以下のようなコードを書きました。

<div class="row">
  <div class="col-xs-8">main</div>
  <div class="col-xs-4">side</div>
</div>

レスポンシブレイアウトはこのcol-xs-8の部分を書き方を変えるだけで作ることができます。Bootstrap3のレスポンシブレイアウトclassは以下の４つが用意されています。

• .col-xs-: どの画面サイズでも適用されるレイアウト
• .col-sm-: タブレットサイズ以上（782px）で適用
• .col-md-: PC（小）サイズ以上（1180px）で適用
• .col-lg-: PC（大）サイズ以上（1200px）で適用

これらのclassに１〜１２の数字をつけることでカラム数を指定できます。また、classは組み合わせることで、同時に複数の画面サイズに対してレイアウトをつくることもできます。

レスポンシブclassはドキュメントに一覧表示されてるのでそちらもチェックしておきましょう。classの部分だけを抜き出すとこんな感じ。

レスポンシブブレークポイントについて

レスポンシブブレークポイントは、画面幅が切り替わるポイントのこと。PCでブラウザの幅を変えてみると分かりやすいのですが、例えば、画面幅が768pxからはタブレットサイズ、992px以上でPCサイズ（小）のように切り替わります。

Bootstrap3を使ったレスポンシブレイアウトの例

先ほどのコードのレスポンシブ化も簡単にできます。サンプルコードの状態だとスマホサイズでも２列のレイアウトになってしまうので、スマホでは１列表示、タブレット（sm）以降で２列表示にするとこんな感じになります。

<div class="row">
  <div class="col-xs-12 col-sm-8">main</div>
  <div class="col-xs-12 col-sm-4">side</div>
</div>

col-xs-12はデフォルトで有効になっているため、省略することもできます。

<div class="row">
  <div class="col-sm-8">main</div>
  <div class="col-sm-4">side</div>
</div>

また、PC（小）サイズから幅を少し変えたい場合は、classを追加することで対応可能。

<div class="row">
  <div class="col-sm-8 col-md-9">main</div>
  <div class="col-sm-4 col-md-3">side</div>
</div>

このように画面幅ごとにカラムの幅を変更することができるので、デザインに合わせてclassを設定しましょう。

さいごに

ここまででグリッドレイアウトとレスポンシブレイアウトについてまとめてきました。レスポンシブclassの書き方はBootstrap3以外のフレームワークでも似たような書き方になってます。なので１つ覚えておくと他のCSSフレームワークでも使い回せるので、覚えておくと後々楽です。

次回はグリッドをさらに便利に使いこなすためのTipsを紹介します。

さいごまでご覧いただきありがとうございました 🙂