このエントリーをはてなブックマークに追加
前回の記事でお知らせしましたが、今ご覧のこのサイトは Twitter Bootstrap を使ったレスポンシブ対応のデザインをCMS化しています。中でももっともすごいと思った「グリッドシステム」。今回はこのサイトでどんな風にCMS化したかご説明します。CMS化の例としてなかなか面白い対応ができたと思います。

まず、「グリッドシステムとは?」なのですが、左の図を見てください。レイアウトをマス目で分割してくれます。ピクセルの幅指定ではなく「使うマスの数」で指定します。Bootstrap は1行を最大12マスに分割できます。その中で、ここは3マス、これは4マス、のように指定すると、きれいにそのマスでレイアウトしてくれます。

そして、グリッドはネスト(入れ子)できます。つまり、この枠の中にさらに枠を入れることができます。入れ子になった枠はその中で12分割してくれます。Webの場合、横に並べるレイアウトは、カラム落ちと呼ばれるレイアウト崩れや思ったとおりに余白を入れられない、など割と難しかったりします。

恥ずかしい話なのですが、CMSテンプレ化し始めたとき、この「グリッドシステム」の仕組みが良くわかってなくて、下の"col-md-9"ってなんだろうなーと思っていたのですが、これがマス目の数の指定でした。つまり、最大12マスなのでこのHTMLの場合は、左:右が3:1というレイアウトになります。
rowが行、その中の<div class="col-md-9"></div>が列の指定です。
<div class="row">
    <div class="col-md-9">
    </div>            
    <div class="col-md-3">
    </div>
</div>
そして、ネストがどういうものかと言うと、次のようになります。rowの中の列にもう一度rowを入れると、親のrowの幅の中で指定したマス目にそってレイアウトしてくれます。
<div class="row">
    <div class="col-md-9">
        <div class="row">
            <div class="col-md-9">
            </div>            
            <div class="col-md-3">
            </div>
        </div>
    </div>            
    <div class="col-md-3">
    </div>
</div>
列の幅はマス目で指定するので、使用するマス目の数を合計で12にしてあげれば、きれいにレイアウトされる、というわけです。

たとえば、今回は汎用的に使える部品として以下のようなパーツを作りました。タイトルが12マス、画像とテキストで6マス、6マス、その下に12マスのテキストと引用部分にレイアウトされています。そしてパーツを置いたマスの幅を使って、その中でレイアウトされます。
今回はこの汎用的なパーツを最大四つまで登録できるように項目を設計しました。最大で登録すると左のようになります。4分割なのでそれぞれ3マス使います。

画像は自動で縮小されますが、画像のサイズによってはレイアウトが破綻するので画像の表示幅も指定できるようにしてみましょう。ここも画像の幅を4/1、2/1、3/4、1/1と言った割合で指定するようにしました。

画像の幅を12マスにします。ネストされた3マスの中で12マスを使ってレイアウトされます。

これまで均等4分割でしたが、これを各列で変更できるようにしてみます。

4つある列の幅を指定できるようにします。
親のマスの数を変えてみました。見栄えを考慮して中のパーツのテキスト量は変更していますが、各列のパーツは全部同じです。
グリッドシステムを使って驚異的に感じるのが"row"を使ってレイアウトしておけば、大抵の場合きちんとパーツとして動作する、ということです。この例でもデータ入力はフォーム形式ですが、パーツ化がどんどんできるので、フォーム入力形式のCMSとはとても相性が良いと思います。今回の面白い使い方を試せたのでおいおいご紹介します。
<div class="row"><!-- 親 -->
    <div class="col-md-9">
        <div class="row"><!-- 子 親の幅の中でレイアウトする -->
           <div class="col-md-9">
            </div>            
            <div class="col-md-3">
            </div>
        </div>
    </div>            
    <div class="col-md-3">
    </div>
</div>
ちなみに、このサイトのほとんどのページがこの方式で更新されています。Twitter  Bootstrapは3.0からデフォルトがレスポンシブ対応なので、自然にマルチデバイス化されます。

このコンテンツは参考になりましたか?

送信する

デジタルマーケティングに対する
実体調査アンケート実施中

是非、アンケートにぜひご協力ください。

デジタルマーケティングに対する
実体調査アンケート実施中

是非、アンケートにぜひご協力ください。

 アンケートに回答する  ≫

無料eBookのダウンロード

【今からでも遅くない!】
初心者に贈る「インバウンドマーケティング」の始め方

 無料ダウンロードはこちら  ≫

人気の記事

タグ別