趣味で運営しているサイト(現在は、レスポンシブ対応をせずにTwitter Bootstrap2を利用している)をレスポンシブ対応したいと思い、Twitter Bootstrap3のレスポンシブ箇所について調べてみた。
カラムについて
おおまかに４種類のサイズに分かれるらしく、
- モバイルサイズ:768px未満
- タブレットサイズ:768px以上、991px以下
- デスクトップサイズ:992px以上、1199px以下
- 大画面サイズ:1200px以上
という具合で考えたらいいらしい。
それぞれモバイルサイズが『xs』、タブレットサイズが『sm』、デスクトップサイズが『md』、大画面サイズが『lg』という文字であらわすらしく、例えばカラムの指定は『col-○○-*』であらわし、タブレットサイズの2カラムならば『col-sm-2』と書くよう(カラムについては、特定のサイズ以上という認識のほうがよさそう)。なお、*部分の数値は1～12まで指定可能。
オフセットも同様に『col-○○-offset-*』というように記述。この記述をすると、左側に空白ができる(margin-leftの指定用)。オフセットの場合は0～12の数値が指定できるらしい。0(margin-left:0)と12(margin-left:100%)の使い道がいまいちよく分からないのだけど。
カラムの順番変更
『col-○○-push-*』や『col-○○-pull-*』といったクラスを使うことによって順序が変更可能。
タブレットサイズとデスクトップサイズで順番が変わるようなサンプルを書こうと思い”col-xs-6 col-sm-pull-6 col-md-push-6″というクラスをもったdivタグを作ると、予想外の動作になってしまった。慣れるのにちょっと時間がかかりそう。これも数値の指定は0～12。
それぞれのサイズでの表示・非表示設定
『visible-○○』で指定のサイズのみ表示、『hidden-○○』で指定のサイズのみ非表示ということができるよう。
レスポンシブウェブデザイン対応での基本は上記のようになりそう。雑だけどサンプルは以下。
Twitter Bootstrap3の勉強
他にもBootstrapには便利そうな部品などがいろいろあるのでもうちょっと勉強していきたい。
コメント