グリッドシステム の使い方


概要

ToolsetBootstrap テーマは,12列の グリッドシステム で構築されています.各カラム(列)の 最大幅は 70pxで,30pxの マージンが あります.デスクトップブラウザー用の ページの 最大幅は1170pxです.Bootstrap の グリッドシステム についての詳細は,こちら(英語).

公式サイトユーザーガイドより引用

左の画像は,公式サイトに 掲載されている 「販売サイトの作例」 です.サイドバーに 3列(グリーンのエリア)を 割り当ているので,コンテンツエリアの幅は 自動的に 9列に 調整されています.まず,コンテンツ領域には,それぞれ3列を使って,一度に3つの製品を 表示する スライダーを 設置しました(ピンク色のエリア).さらに,コンテンツ領域の内側に 一行あたり4つの 最新製品(NEWEST PRODUCTS)を 表示させるため,9列の コンテンツエリアの中に,新しく流動グリッドを ネスト(入れ子)しました(ブルーのエリア).流動グリッドは 12列で 動作するので,最新製品は それぞれ 3列幅の コンテナに 配置されます.

 

Bootstrap グリッドシステム の仕組み

基本グリッド

基本グリッドは,1170pxの 最大幅と 12列を 使用し,スクリーンのサイズに 合わせて 最小768pxに 変化します.表示するデバイスが 768px以下の画面幅の場合は,列の配置が変化し,列の内容を 垂直方向に 積み上げ表示(スタック)されます.レイアウトは 「.row」要素で 列を 囲みます.各行内では,最大で 12の列数を 指定できます.ページを 3列に 等分したい場合,たとえば,3つのj.span4要素(span クラスで定義する列幅)からなる レイアウトを 使用すると,4列x3で合計12列になります.

1行内であれば,異なる列幅(span)を 組み合わせて レイアウトすることが 出来ます.さらに 行を ネスト(入れ子)して,より複雑な レイアウトを 作成することも できます.固定グリッドの場合,ネストされた行は,親と 同数の列が 必要です(詳細はこの後).

流動グリッド(class=”row-fluid”)

流体グリッドでは,列幅に 割合を 使用します.使用するHTMLは,上の基本グリッドと とてもよく似ています.行を表すクラス名が, <div class=row>から, <div class=row-fluid>に変わるだけで,列についての記述は 変わりません.

ネスト(入れ子)したグリッド

流動グリッドを ネストする場合,子として 追加される 列の合計は 常に「12」です.基本の 固定グリッドと 流動グリッドを 比較してみます.

①固定グリッド

入れ子になった行,span4+span4で,列の合計は span8に なります.親の列に 注意してください.

②流動グリッド

入れ子になった 流動グリッドの行は,span4+span4+span4で,列の合計は span12に なります.親の列数(span8)に 関係なく,常に 12になるように 追加する必要が あります.ただ,実際の作業では,グリッドのレイアウトの複雑さについて,あまり心配する必要は ありません.ToolsetBootstrapテーマの レイアウトツールでは,様々なグリッドレイアウトの中から 選択して,ページや投稿画面に 直接HTMLを 挿入できます.その際,親コンテナーのサイズに 応じて,挿入可能なレイアウトを 表示してくれます.

BootstrapのCSS

上記のグリッド用のクラスの他にも,Bootstrapでは,基本的なウェブサイトに必要な,多くのヘルパークラスや スタイルを 備えています.Bootstrapの 基本的なCSSについての 詳細はオンラインドキュメントを参照して下さい.

 

レイアウトツールを使って簡単にグリッドを挿入する

ToolsetBootstrap テーマでは,コンテンツエディターから 直接 レイアウトツールに アクセス できます.

コンテンツ編集画面で,レイアウトツールボタンを クリックします

レイアウトを選択しクリックします。

選択したレイアウトに対応したHTMLが挿入されます。

 

Bootstrapテーマを使ったサイトの例

公式サイトユーザーガイドより引用

左のような 複雑な 商品ページも,上記の基本的な方法を 組み合わせて つくられています. Bootstrap Commerce siteで,作例を 確認することが できます.

まず始めに,テーマオプションで サイドバーを 3列にし,コンテンツ用のエリアを 9列に 設定します.コンテンツエリアでは,製品(画像,説明)に関する 関連情報と,関連製品のリストが 表示されます.サイドバーでは,カートと 検索フィルタのオプションが あります.ここでは,コンテンツ領域に 絞って 見ていきます.

 

使用されているグリッド構造

公式サイトユーザーガイドより引用

コンテンツエリアは,商品画像に 3列,商品詳細部分に 6列,合計9列で 構成されています.このページでは,「row」クラスを 使い,固定グリッドにします.

公式サイトユーザーガイドより引用

関連製品(related products)セクションは,固定グリッドではなく,「row-fluid」クラスを 使い,レスポンシブ機能をもつ 流体グリッドにします.これによって 9列の 親コンテナを 4つの等幅をもつ列に 分割することが できます.

HTMLの記述例

ToolsetBootstrapテーマのレイアウトツールボタンは,自分で コードを記述しなくても,追加したいレイアウトを 選択するだけで,上記のようなHTMLを 挿入してくれます.