Responsive

レスポンシブデザインとは

• 画面の大きさに応じてレイアウトを変える
   
• モバイルの場合はリダイレクトする、ではなく…
  単一のHTMLで実現する。

 

 

Bootstrapを使うと

• レスポンシブにするためのクラス
   
• CSSを複数用意しなくても、HTMLだけでレスポンシブにできる。

 

 

段組み

• Bootstrapでは、段組みを基本としたレイアウトを行う
   
• 画面サイズを4種類に分け、それぞれ段組みを指定

	xs (Extra Small)	sm (Small)	md (Medium)	lg (Large)
画面幅	～767px	768px ～ 991px	992px ～ 1199px	1200px ～

• 段組みは、画面幅を12とした相対サイズで指定 (例: 3:9の2段組、4:4:4の3段組)

例1: xsでは縦に並べる。それより大きい場合は横に並べる。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    …
  </div>
  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    …
  </div>
</div>

例2: sm以上の場合、目次を表示する

<div class="row">
  <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
    …
  </div>
  <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
    …
  </div>
  <div class="hidden-xs col-sm-2 col-md-2 col-lg-2">
    目次
    …
  </div>
</div>

 

 

まとめ

Bootstrapでは、

• CSSをゴリゴリ書かなくてもカッコいいデザインができる
   
• 単一のHTMLで様々な画面サイズに対応するレスポンシブデザインができる

ご清聴ありがとうございました