【Bootstrap】グリッドシステムは「あれ」ができればマスターできる

7385 ワード
grid Bootstrap bootstrap4 グリッド Bootstrap テキストリンク

さぁ、タイトルが Youtube の動画のタイトルの引きみたいになってしまいましたが、
今回は皆さん、ご存知 Bootstrap についてです

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

そして人気の大きな理由の一つにグリッドシステムがあります。
そうです、画面サイズによってウニャウニャする、あれです。

簡単にレスポンシブな画面を組むことができるので、
グリッドシステムをマスターすると、できることの幅が相当増えますよね。

グリッドシステムとは一言で説明すると、
画面を横幅のサイズごとに、12分割にし、指定した数字分の範囲を確保する仕組みですね。

この時点で頭が痛くなったデザインに苦手意識がある、そこのサーバーエンジニアのあなた！！
もったいないですよ〜！

それでは、さっそく実践していきましょう！
グリッドシステムを使って、画面を 2分割 にしてみます。

まず、container クラスの block 要素を用意し、その中に row クラスの block 要素を書きます。

bootstrap.html
<body>
    <div class="container">
        <div class="row">
        </div>
    </div>
</body>

このように row クラスまで用意することで、グリッドシステムは使用することができます。

さて、画面を 2分割 するには、全部で 12分割 されるうち 6分割分 を 2つ 用意すればOKですね。
6分割分 を確保するには ブロック要素のクラスに col-6 と記述します。

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

（分かりやすいように、色を付けて、縦幅をいっぱいにとりました。）

はい！！！
いやぁ便利ですねぇ〜

続いて、3分割にしてみます。
画面を 3分割 するには、全部で 12分割 するうち 4分割分 3つ を用意すればOKですね。
4分割分 を確保するには ブロック要素のクラスに col-4 と記述します。

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>

いやぁ便利だなぁ〜。。。

皆さんお気づきでしょうか。。。
Bootstrap のグリッドシステムは、なんと実は。。。
「割り算」ができれば使えてしまうのです！！！

12 ÷ 画面を何分割したいか = 指定する数字

となります。（つまり画面を何分割したいか は 12 の約数でなければいけません。）

では最後に、画面を 6分割 しましょう。

12 ÷ 6 = 2 なので、クラスには col-2 を指定すればよいですよね。

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

割り算ができれば、画面の分割ができちゃうなんて、
Bootstrap、ほんとに便利ですねぇ。。。