サンプルで学ぶTwitter Bootstrapの使い方：前編 (3/3)

2013年07月25日　13時08分更新

文●おおくぼようすけ、まきのてつお

ツイートする

レイアウトの設定

　最初に、サイトの基本的なレイアウトを設定します。

固定レイアウトと流動レイアウト

　Twitter Bootstrapでは「固定レイアウト」と「流動（リキッド）レイアウト」の2つのレイアウトが用意されています。

固定レイアウト

　Webページの幅を固定して画面の中央に表示する場合は、固定レイアウトを利用します。固定レイアウトでは、ブラウザーの幅にかかわらず、幅940pxの領域内にコンテンツを配置して表示します。

　固定レイアウトは、class属性「container」を指定したdiv要素の中にコンテンツを記述します。

<div class="container">
　・
　・
　・  
</div>

　サンプルサイトではこの固定レイアウトを利用します。

流動レイアウト

　ブラウザーのサイズにあわせてコンテンツ幅が変わるようにしたい場合は、流動レイアウトを利用します。流動レイアウトは、class属性「container-fluid」を指定したdiv要素の中にコンテンツを記述します。

<div class="container-fluid">
　・
　・
　・
</div>

グリッドシステムを利用したレイアウトの指定

　Twitter Bootstrapは、一般的なCSSフレームワークと同様に、グリッドレイアウトシステムを採用しています。Twitter Bootstrapのグリッドシステムは、幅940pxを12本のグリッドで分割したもので、このグリッドに沿って要素を配置していきます。

　今回作るブックカタログのサイトは、サイトバーとメインコンテンツのみのシンプルな2カラムのレイアウトです。サイドバーを4本のグリッド、メインコンテンツを8本のグリッドを使ってレイアウトします。

　グリッドを使ったレイアウトでは、div要素のclass属性に「row」を指定し、その中にclass属性「spanx」を指定したdiv要素を書きます。spanxの「x」には使用するグリッドの本数を指定し、合計が12になるように調整します。

　実際のHTMLは以下のようになります。コンテンツ領域を指定する「container」の中にrowとspanを記述します。

<div class="container">
    <div class="row">
        <div class="span4">サイドバー..</div>
        <div class="span8">メインコンテンツ..</div>
    </div>
</div>

グリドシステムのネスト

　グリッドは入れ子にもできます。入れ子にしたい場合は、再度、div.rowを定義し、その中にさらにdiv.spanxを指定します。入れ子にする場合、spanxのxは1つ上の親要素で指定した数値の合計になるようにします。

　たとえば、8本のグリッドで構成されているメインコンテンツ内にグリッドを追加するのであれば、spanxに「4」と「4」を指定し、グリッドの合計が「8」になるようにします。

        <div class="row">
            <div class="span4">
                span4
            </div>
            <div class="span8">
                span8
                <div class="row">
                  <div class="span4">span 4</div>
                  <div class="span4">span 4</div>
                </div>
            </div>
        </div>

　グリッドシステムの入れ子は、後述する一覧表示のレイアウトにも利用しています。

グリッドシステムの相殺

　カラムとカラムの間にスペースを空けたいときは、div要素にclass属性「offsetx」を追加します。offsetxの「x」も、spanxと同様に相殺したいグリッドの本数を数値で指定します。

　たとえば、メインコンテンツ内にスペースを空けたい場合、最初にspanで「8」を指定していますので、入れ子にしたspanとoffsetの合計が8本になるようにします。

　以下の例では、入れ子にしたspanに「4」を指定し、残っている部分にspan3とoffset1を指定して、合計で8になるようにします。

            <div class="row">
                <div class="span4">
                    span4
                </div>
                <div class="span8">
                    span 8
                    <div class="row">
                        <div class="span4">span 4</div>
                        <div class="span3 offset1">span 3 offset 1</div>
                    </div>
                    <div class="row">
                        <div class="span3 offset1">span 3 offset 1</div>
                        <div class="span3 offset1">span 3 offset 1</div>
                    </div>
                    <div class="row">
                        <div class="span5 offset3">span 5 offset 3</div>
                    </div>
                </div>
            </div>

流動グリッド

　流動レイアウトを採用する場合は、流動グリッドが利用できます。流動グリッドでは、画面の幅に合わせてグリッドの横幅を調整できます。class属性「row-fluid」を追加するだけです。ネストしている場合は、対象のrowにすべて「fluid」を追加します。

        <div class="row-fluid">
            <div class="span4">span 4</div>
            <div class="span8">span 8</div>
        </div>

◆

　次回はコンテンツ部分のマークアップを説明します。

著者：おおくぼようすけ

会社員時代は主に生産管理システムに従事。スタンドアロンだったシステムのWeb化を進めた。2007年に独立、株式会社バンシステムズを設立。現在はCakePHPを使い、Webシステム開発をメインにサイト構築を行なうかたわら、Web開発の勉強会の主催や講師を行なっている。ここ最近では、iPhoneを使用した生産管理・在庫管理システムの構築を進めている。