【Bootstrap】グリッドシステムを入れ子で実現

6406 ワード
HTML Bootstrap グリッド HTML テキストリンク

今回は皆さん、ご存知 Bootstrap についてです。

世界で最も人気の CSS フレームワーク。
この芸能界の次に入れ替わりが激しいと言われる ITの世界 において、
CSS フレームワーク人気の王座に Bootstrap は、開発当初の 2011年 から座り続けられておられます。

そして人気の大きな理由の一つにグリッドシステムがあります。
そうです、画面サイズによってウニャウニャする、あれです。
（画面を横幅のサイズごとに、12分割にし、指定した数字分の範囲を確保する仕組みですね。）

今回は確保した範囲内でさらに 12分割 をする方法をご紹介します。
まず、画面を普段通りのやり方で 3分割 にします。
画面を 3分割 するには、全部で 12分割 するうち 4分割分 を確保すればOKですね。

bootstrap.html
<body>
    <div class="container">
        <div class="row">
            <div class="col-4" style="background-color: blue; height:100vh">
            </div>
            <div class="col-4" style="background-color: white; height:100vh">
            </div>
            <div class="col-4" style="background-color: red; height:100vh">
            </div>
        </div>
    </div>
</body>

さぁ今回はさらに、この真ん中の白い部分を 3分割 します。
まず、3分割したいブロック要素の中に、row クラスのブロック要素を記述します。

bootstrap.html
<body>
    <div class="container">
        <div class="row">
            <div class="col-4" style="background-color: blue; height:100vh">
            </div>
            <div class="col-4" style="background-color: white; height:100vh">
                <div class="row">
                </div>
            </div>
            <div class="col-4" style="background-color: red; height:100vh">
            </div>
        </div>
    </div>
</body>

そして、さらに row クラスのブロック要素の中に 3分割 したブロック要素を記述します。

bootstrap.html
<body>
    <div class="container">
        <div class="row">
            <div class="col-4" style="background-color: blue; height:100vh">
            </div>
            <div class="col-4" style="background-color: white; height:100vh">
                <div class="row">
                    <div class="col-4" style="background-color: yellow; height:100vh">
                    </div>
                    <div class="col-4" style="background-color: red; height:100vh">
                    </div>
                    <div class="col-4" style="background-color: black; height:100vh">
                    </div>
                </div>
            </div>
            <div class="col-4" style="background-color: red; height:100vh">
            </div>
        </div>
    </div>
</body>

これで完了です。

じゃん！！！