Bootstrapを使ってみる。コンテンツ編(グリッドシステム)


Bootstrapを使ってみよう。コンテンツ編(グリッドシステム)

今回はBootstrapの特徴であるグリッドシステムの利用。
Bootstrapのグリッドシステムでは横一行を12グリッドになるように指定する。
また、ここではブレイクポイントの理解も必要になる。

Bootstrap
*この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。

Bootstrapのグリッドシステムについて

  • 横幅は12カラムに分割されていて使用するコンテンツエリアごとに何カラム分使うかを指定する。
  • 合計で12カラムになるように指定する。
  • 12を超えたカラムは折り返されて表示。
  • containerクラスで囲み、さらにrow(行)クラスの中に「col-md-*」クラスを入れる。*は1から12。
  • 可変グリッドデザインの時は「container」を「container-fluid」に「row」を「row-fluid」に変更する。
  • 各カラムには15pxのgutter(内側の余白)がある。
  • ネスト化出来る。親のカラム数を超えて子のカラム数を12などと指定可能。

カラム分割イメージ
gridsystem


Bootstrapのブレイクポイントについて

画面サイズ 主にモバイル
768px以下
 主にタブレット
768px以上~992px以下
主にデスクトップ
992px以上~1200px以下
大型ディスプレイ
1200px以上
 Class prefix .col-xs- .col-sm- .col-md- .col-lg
コンテナの幅 なし 750px 970px 1170px

Bootstrapのグリッドシステム基本

(例:メインコンテンツ8カラム、サイドコンテンツ4カラムの配置タグ)


上記コードのサンプルイメージ
gridsystem

デバイスの画面サイズに応じてカラム数を変える

Bootstrapではメディアクエリによるブレイクポイントに応じてカラム数を変える仕組みがある。
下記のサンプルコードでは、
「col-xs-*」スマートフォン
「col-sm-*」タブレット
「col-md-*」デスクトップ
それぞれのデバイスに応じてコンテンツのレイアウトを変更するように指定してみた。
スマートフォンでは1列表示、タブレットでは2列表示(12を超えるので自動的に折り返される)、デスクトップでは4列表示。


上記コードのサンプルイメージ
デスクトップ表示
gridsystem

タブレット表示
gridsystem

スマートフォン表示
gridsystem

Bootstrapのグリッドシステムを使えば、すごく簡単に変化するレイアウトを構築することができる。

カラムの間隔をあける場合

段組の間をあけてレイアウトしたい場合はオフセットを使う。「col-md-offset-*」
例:左右4カラムの間に4カラム分の間隔をあける


オフセットサンプルイメージ
gridsystem

カラムをデバイス毎に表示・非表示したい場合


まずはBootstrap-Responsive utilitiesの表を参照
gridsystem

  • 「visible-ブレイクポイント(xs,sm,md,lg)-*(1-12)」を追加すると、指定した画面サイズで表示することが出来る。
  • 「.hidden-ブレイクポイント(xs,sm,md,lg)」を追加すると、指定した画面サイズで非表示にすることが出来る。

(例:スマートフォン(xs)で閲覧時、サイドカラム2を非表示にする。)


PC,タブレット表示のイメージ
gridsystem

スマートフォン表示のイメージ
gridsystem

グリッドシステムを利用することで、マルチデバイスへの対応がすばやく作れるようになる。
すべてのパーツを利用しなくとも、このグリッドシステムだけ使うということもありなのかもしれない。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL