Bootstrapの使い方（４）〜レスポンシブ対応

レスポンシブWebデザインは一つのファイルで複数のデバイスに対応させることができる仕組みです。スマホサイトの重要性はますます高くなっていますので、サイト作成イコールレスポンシブ対応は当たり前になってきています。
スマホ用とPC用を考慮して設計するのは結構手間がかかりますが、Bootstrapを使うと簡単にレスポンシブに対応してくれます。

デバイスの画面に応じて列幅を変更

デバイスの画面幅に応じてレイアウトを変更する仕組みはCSS3のメディアクエリを使います。
レイアウトを切り替えるポイントになる画面幅をブレイクポイントと呼びます。
Bootstrapでレスポンシブに対応させるにはグリッドシステムを活用します。
Bootstrapのグリッドシステムではあらかじめブレイクポイントが決められています。

Bootstrapが用意している.containerのCSS記述を見ると次のようにブレイクポイントが設定されており、それぞれのブレイクポイントで.containerの幅を切り替えています。つまり.containerを使用すればデバイスが変われば表示幅が変更されることになるわけです。

.containerのcss記述（抜粋）

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

グリッドの幅をレスポンシブ対応にする仕組み

CSSにブレイクポイントが設定されているものにはグリッド幅を決めるために使用したcol-○○-Nがあります。
col-○○-Nには４つの種類がありますが、決まったブレイクポイントの範囲内で使用可能になります。
col-xs-Nはすべてのデバイスで使用可能
col-sm-Nは768px以上の幅で使用可能
col-md-Nは992px以上の幅で使用可能
col-lg-Nは1200px以上の幅で使用可能です。

この仕組みはBootstrapのCSSを確認するとわかりやすいです。
以下はそれぞれのブレイクポイントとcol-○○-Nのcss記述（抜粋）内容です。

.col-xs-12 {
  width: 100%;
/*途中省略*/
}
@media (min-width: 768px) {
  .col-sm-12 {
    width: 100%;
  }
/*途中省略*/
}
@media (min-width: 992px) {
  .col-md-12 {
    width: 100%;
  }
/*途中省略*/ 
}
@media (min-width: 1200px) {
  .col-lg-12 {
    width: 100%;
  }
/*途中省略*/ 

複数のcol-○○-Nクラスを使用

複数のcol-○○-Nクラスを使用するとデバイスごとにカラム数の違うレイアウトを作成することができます。
col-xs-Nはすべてのデバイス（画面幅）で使用可能です。col-xs-Nとcol-sm-Nの２つのクラスを指定しておけば、768px以上の幅でcol-sm-Nで指定したカラムの幅になります。また、767px以下ではcol-xs-Nの指定どおりになります。つまり768px以上の幅ではcol-sm-Nが優先されます。このことは上に示したBootstrapのCSSの指定を確認すると理解できると思います。
col-xs-Nとcol-sm-Nとcol-md-Nを指定した場合は768px未満ではcol-xs-Nの指定に従い、768px〜992px未満ではcol-sm-Nの指定になります。そして、992px以上の幅でcol-md-Nの指定になります。

次のように下のクラスの方が優先度が高く、使用できる範囲は狭くなります。
col-xs-N 全てで使用可
↓
col-sm-N 768px以上で使用可
↓
col-md-N 992px以上で使用可
↓
col-lg-N 1200px以上で使用可

次のサンプルを見てください。
３つのdivにcol-xs-Nを全てN=12で指定しています。768px未満では、カラムA、B、Cとも横幅いっぱいのグリッドを作成します。つまり縦に並びます。
次に2つめのクラスcol-sm-NはA=12,B=8,C=4としています。 768px以上の幅ではカラムAは横幅いっぱいに広がります。B、Cはカラム落ちしてカラムAの下について8:4の割合で横に並びます。
3つめのクラスcol-md-N はA=6,B=4,C=2としています。992px以上の幅ではカラムはすべて6:4:2の割合で横に並びます。

複数のcol-○○-Nクラスを使用したサンプル

<div class="container">
  <h1>グリッドシステム〜複数のカラムを指定</h1>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6">カラムA</div>
    <div class="col-xs-12 col-sm-8 col-md-4">カラムB</div>
    <div class="col-xs-12 col-sm-4 col-md-2">カラムC</div>
  </div>
</div>

col-○○-offset-Nもレスポンシブで活用

col-○○-offset-Nは左側に余白を作ります。また、カラムを左にずらすcol-○○-pull-Nや右にずらすcol-○○-push-Nについてもレスポンシブに対応しています。
クラス名の○○部分にxs,sm,md,lgを指定することでそれぞれのブレイクポイントで活用することができます。

col-○○-offset-Nを使ったサンプル

<div class="container">
  <h1>グリッドシステム〜複数のカラムを指定</h1>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6">カラムA</div>
    <div class="col-xs-12 col-sm-2 col-md-4">カラムB</div>
    <div class="col-xs-12 col-sm-4 col-sm-offset-6 col-md-offset-0 col-md-2">カラムC</div>
  </div>
</div>

col-○○-offset-Nをブレイクポイントが変化した時に消去したい場合はcol-md-offset-0を指定

要素の表示と非表示

クラス名hidden-○○は画面のサイズに応じて要素を表示にしたり、非表示にしたりすることができます。
display:blockにしたりdisplay:noneにしたりしているわけです。

非表示

hidden-○○サンプル

<div class="container">
  <h1>グリッドシステム〜複数のカラムを指定</h1>
  <div class="row">
    <div class="hidden-xs col-sm-12 col-md-6">カラムA</div>
    <div class="col-sx-12 col-sm-8 col-md-4">カラムB</div>
    <div class="col-sx-12 col-sm-4 col-md-2">カラムC</div>
  </div>
</div>

Bootstrapのcssの記述（抜粋）は以下のとおりです。
!importantが付いていることに注目です。

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

表示

非表示の要素を表示するためのクラスもあります。

visible-○○のBootstrapのcssの記述（抜粋）は以下のとおりです。

@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
}

グリッド幅に合わせた画像の表示

画像をグリッドシステムに配置した場合そのままではグリッド幅が変更されたときに画像がグリッドからあふれ出す場合があります。グリッドの幅に応じて画像を縮小してくれるクラスがimg-responsiveになります。ただし、これはグリッド幅に合わせて画像を縮小するだけで拡大する機能はありません。

.img-responsiveのBootstrapのcssの記述（抜粋）は以下のとおりです。

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

レスポンシブ対応にする場合はimgにclass-“img-responsive”を設定しておくこと

• «
• <
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• >
• »