Bootstrapの一部の機能を使い、最短でレスポンシブデザインを実装する方法

やんけえ

レスポンシブデザインの実装にBootstrapを使われている方、結構いると思います。
今回はBootstrapについて掘り下げた記事ではなく、Bootstrapの一部の機能だけを使ってレスポンシブデザインを最短で実装する方法をご紹介していきます。
※Bootstrapをある程度使ったことがある、少し勉強したことがあるという方が対象です。備忘録のようにまとめておりますので、ご了承ください。

Bootstrapの必要なCSSだけ抜き出そう

Bootstrapはかなりの高機能設計がされており、大規模サイトでもない限りその機能の全てを使うことはほぼありません。
つまり使わない不要なファイルも読み込むことになるので、その分読込速度も若干ながら遅くなります。
一般的にレスポンシブデザインとして使われる事が多い機能は以下２つ。

• デバイス幅による表示非･表示の切り替え
• デバイス幅によるカラムレイアウト

この2点のCSSのみを抜き出したファイルがこちら

レスポンシブで必要なCSSのみファイル

実際にレスポンシブの動きを見てみよう！

今見られているブラウザの幅を変えて、レスポンシブデザインの動きを確認してみてください。

デバイス幅によって表示させる

デバイス幅によって非表示にする

デバイス幅によってカラムレイアウトを変える

992～1199pxでは4カラム、768～991pxでは3カラム、～767pxでは2カラムに変化します。