ポータルサイトに使えるBootstrapのグリッドシステムを理解する

フロント・バックエンド問わずフレームワークの定番として重宝されているBootstrapですが、便利すぎるが故に基本的なことを理解しないまま利用してしまいがちです。 中でも「グリッドシステム」に関してはフロントのデザインに大きく影響してくるので、見落とせない機能となります。

Bootstrapでサイトのレイアウトを考える

サイトにBootstrapを利用する際は、グリッドシステムを考慮して作業を進めていかないと実現が不可能なデザインをしてしまったり、Bootstrapを利用するメリットが失われたりするため、実際にHTMLファイルを編集して確認することをおすすめします。

Bootstrap

サイトにBootstrapを利用する際は、グリッドシステムを考慮して作業を進めていかないと実現が不可能なデザインをしてしまったり、Bootstrapを利用するメリットが失われたりするため、実際にHTMLファイルを編集して確認することをおすすめします。

画面がフルサイズでのサイト

画面フルサイズでポータルサイトを作成するケースは少ないですが、基本的には画像(今回は横幅1935px)のようなグリッドになります。コードは下記のようになります。


    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-1"><span class="d-block bg-white text-center py-1">1</span></div>
        <div class="col-11"><span class="d-block bg-white text-center py-1">11</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-2"><span class="d-block bg-white text-center py-1">2</span></div>
        <div class="col-10"><span class="d-block bg-white text-center py-1">10</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-3"><span class="d-block bg-white text-center py-1">3</span></div>
        <div class="col-9"><span class="d-block bg-white text-center py-1">9</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-4"><span class="d-block bg-white text-center py-1">4</span></div>
        <div class="col-8"><span class="d-block bg-white text-center py-1">8</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-5"><span class="d-block bg-white text-center py-1">5</span></div>
        <div class="col-7"><span class="d-block bg-white text-center py-1">7</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-6"><span class="d-block bg-white text-center py-1">6</span></div>
        <div class="col-6"><span class="d-block bg-white text-center py-1">6</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-7"><span class="d-block bg-white text-center py-1">7</span></div>
        <div class="col-5"><span class="d-block bg-white text-center py-1">5</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-8"><span class="d-block bg-white text-center py-1">8</span></div>
        <div class="col-4"><span class="d-block bg-white text-center py-1">4</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-9"><span class="d-block bg-white text-center py-1">9</span></div>
        <div class="col-3"><span class="d-block bg-white text-center py-1">3</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-10"><span class="d-block bg-white text-center py-1">10</span></div>
        <div class="col-2"><span class="d-block bg-white text-center py-1">2</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-11"><span class="d-block bg-white text-center py-1">11</span></div>
        <div class="col-1"><span class="d-block bg-white text-center py-1">1</span></div>
    </div>

    <div class="row bg-secondary py-3 mb-1 px-0 mx-0">
        <div class="col-12"><span class="d-block bg-white text-center py-1">12</span></div>
    </div>

サイトの横幅を指定する場合

Bootstrapにはあらかじめ最大幅を1140pxにして要素を中央に配置する”container”というクラスが用意されています。
ほとんどのポータルサイトの場合、このクラスを利用して制作します。下記コードを参考にしてください。


<div class="container">
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-1"><span class="d-block bg-white text-center py-1">1</span></div>
            <div class="col-11"><span class="d-block bg-white text-center py-1">11</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-2"><span class="d-block bg-white text-center py-1">2</span></div>
            <div class="col-10"><span class="d-block bg-white text-center py-1">10</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-3"><span class="d-block bg-white text-center py-1">3</span></div>
            <div class="col-9"><span class="d-block bg-white text-center py-1">9</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-4"><span class="d-block bg-white text-center py-1">4</span></div>
            <div class="col-8"><span class="d-block bg-white text-center py-1">8</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-5"><span class="d-block bg-white text-center py-1">5</span></div>
            <div class="col-7"><span class="d-block bg-white text-center py-1">7</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-6"><span class="d-block bg-white text-center py-1">6</span></div>
            <div class="col-6"><span class="d-block bg-white text-center py-1">6</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-7"><span class="d-block bg-white text-center py-1">7</span></div>
            <div class="col-5"><span class="d-block bg-white text-center py-1">5</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-8"><span class="d-block bg-white text-center py-1">8</span></div>
            <div class="col-4"><span class="d-block bg-white text-center py-1">4</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-9"><span class="d-block bg-white text-center py-1">9</span></div>
            <div class="col-3"><span class="d-block bg-white text-center py-1">3</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-10"><span class="d-block bg-white text-center py-1">10</span></div>
            <div class="col-2"><span class="d-block bg-white text-center py-1">2</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-11"><span class="d-block bg-white text-center py-1">11</span></div>
            <div class="col-1"><span class="d-block bg-white text-center py-1">1</span></div>
        </div>
    
        <div class="row bg-secondary py-3 mb-1">
            <div class="col-12"><span class="d-block bg-white text-center py-1">12</span></div>
        </div>
    </div>

左右を2分割するレイアウトはこれで把握できたかと思います。ブラウザに表示されたものをキャプチャしてイラストレーター等でガイドを作成すればBootstrapのグリッドシステムに準じたデザインになります。

3等分や4等分にレイアウトするものもレイヤーで管理すればいちいちブラウザでキャプチャを取りながらデザインするという手間が省けるので効率的です。
Bootstrapを利用する頻度が高い場合は用意しておいたほうがよいでしょう。

まとめ

今回はBootstrapの基本的なグリッドシステムを取り上げました。
まだまだ便利な機能があるので、そちらは今後紹介させていただきたいと思います。