グリッドシステムをマスターしよう (1/4)

Bootstrap利用の最大のメリットは、「画面サイズに応じてレイアウトを自動調整できる」という点にあるでしょう。そのキモとなるのが、「グリッドシステム」です。

グリッドシステムというのは、表示するコンテンツをいくつかのブロックに分けて整理し、それらを「グリッド」と呼ばれる縦横に分割したエリアにはめ込んで表示する仕組みです。わかりやすくいえば、「表」のようなものの中にコンテンツをはめ込んで表示するんだ、と想像するといいでしょう。

このグリッドシステムの一番の特徴は「横に並ぶブロックを自動調整する」という点にあります。例えば横幅が広いパソコンの画面では、２つのブロックを横に並べて表示するが、スマートフォンのような横幅の狭い画面では２つのブロックを縦に並べる、という具合ですね。

この自動調整は、タグに設定されるCSSのクラスによって実現しています。グリッドシステムによるコンテンツの書き方を整理すると、下のリスト欄のようになります。ポイントを幾つか整理しましょう。

<div class="container">

これは既に前回登場しましたね。Bootstrapのコンテンツは、常に class="container" のタグ内に記述します。これにより横幅の自動調整がされます。

<div class="container-fluid">

これが、グリッドシステムのコンテナとなる部分です。class="container-fluid"により、この中に書かれたタグが横幅に応じて自動調整されるようになります。

<div class="row">

これは、コンテンツのrow（横の列）を記述するためのコンテナです。グリッドシステムでは、このclass="row"のタグの中に、表示するコンテンツを用意します。これにより、このclass="row"のタグ内に組み込まれているコンテンツのタグが、自動的に横に並べられたり、縦に並べられたりするのです。

class="row"を指定したタグは、複数用意できます。それらは縦に並べられます。この「rowの中に横に並べるコンテンツを用意し、そのrowをいくつも書いてた手に並べる」という基本的な構造をしっかり理解しておきましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<div class="container">

<div class="container-fluid">

    <div class="row">
        <div>コンテンツ</div>
        <div>コンテンツ</div>
        ……
    </div>
    
    <div class="row">
        ……必要なだけrowを用意……
    </div>
</div>

</div>