Bootstrapの一部の機能を使い、最短でレスポンシブデザインを実装する方法
レスポンシブデザインの実装にBootstrapを使われている方、結構いると思います。
今回はBootstrapについて掘り下げた記事ではなく、Bootstrapの一部の機能だけを使ってレスポンシブデザインを最短で実装する方法をご紹介していきます。
※Bootstrapをある程度使ったことがある、少し勉強したことがあるという方が対象です。備忘録のようにまとめておりますので、ご了承ください。
Bootstrapの必要なCSSだけ抜き出そう
Bootstrapはかなりの高機能設計がされており、大規模サイトでもない限りその機能の全てを使うことはほぼありません。
つまり使わない不要なファイルも読み込むことになるので、その分読込速度も若干ながら遅くなります。
一般的にレスポンシブデザインとして使われる事が多い機能は以下2つ。
- デバイス幅による表示非・表示の切り替え
- デバイス幅によるカラムレイアウト
この2点のCSSのみを抜き出したファイルがこちら
実際にレスポンシブの動きを見てみよう!
今見られているブラウザの幅を変えて、レスポンシブデザインの動きを確認してみてください。
デバイス幅によって表示させる
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="visible-lg"> 1200px~で表示(デスクトップパソコン用) </div> <div class="visible-md"> 992~1199pxで表示(ノートパソコン用) </div> <div class="visible-sm"> 768~991pxで表示(タブレット用) </div> <div class="visible-xs"> ~767pxで表示(スマートフォン用) </div> |
1200px~で表示(デスクトップパソコン用)
992~1199pxで表示(ノートパソコン用)
768~991pxで表示(タブレット用)
~767pxで表示(スマートフォン用)
デバイス幅によって非表示にする
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="hidden-lg"> 1200px~で表示(デスクトップパソコン用) </div> <div class="hidden-md"> 992~1199pxで表示(ノートパソコン用) </div> <div class="hidden-sm"> 768~991pxで表示(タブレット用) </div> <div class="hidden-xs"> ~767pxで表示(スマートフォン用) </div> |
1200px~で表示(デスクトップパソコン用)
992~1199pxで表示(ノートパソコン用)
768~991pxで表示(タブレット用)
~767pxで表示(スマートフォン用)
デバイス幅によってカラムレイアウトを変える
992~1199pxでは4カラム、768~991pxでは3カラム、~767pxでは2カラムに変化します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="col-test"> <div class="col-md-3 col-sm-4 col-xs-6"> コンテンツ </div> <div class="col-md-3 col-sm-4 col-xs-6"> コンテンツ </div> <div class="col-md-3 col-sm-4 col-xs-6"> コンテンツ </div> <div class="col-md-3 col-sm-4 col-xs-6"> コンテンツ </div> <div class="col-md-3 col-sm-4 col-xs-6"> コンテンツ </div> <div class="col-md-3 col-sm-4 col-xs-6"> コンテンツ </div> <div class="col-md-3 col-sm-4 col-xs-6"> コンテンツ </div> <div class="col-md-3 col-sm-4 col-xs-6"> コンテンツ </div> </div> |
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ
コンテンツ