Bootstrapのグリッドを理解する【図解たっぷりBootstrap入門】

Bootstrapを使用するとPCやスマホなど使用する機器に左右されず整ったWebページを作ることができます。

Bootstrapの中身ってどうなっているの？

Bootstrapでは、ボタンやメニューなど様々なパーツがあらかじめ用意されています。

それはつまり、HTML/CSS/JavaScriptファイルまたはコードのことです。 Bootstrapが用意してくれているクラスなどを指定することで簡単にデザインを作成することができます。

以下イメージ内では、ボタンが例として使われています。これも、ボタンの為のCSSが予め用意されているので、「btn-primary」というクラスの指定だけでボタンが作れるのです。

file

このようにBootstrapでは便利なデザインパーツが沢山用意されているので、美しいWEBサイトを簡単に素早く作る事が出来きます。

また、前のレッスンでも触れましたが、レスポンシブデザインにも対応しています。レスポンシブとは、画面幅の異なるどのデバイス（スマホ・PCなど）で見ても、レイアウトなどが整ったサイトにすることです。

Bootstrapでは、レスポンシブデザインに最適なグリッドシステムというものが用意されています。つまり、レスポンシブの為のCSSもあらかじめ用意されているという事です。このレッスンでは、グリッドシステムの仕組み、使い方を学んでいきます。

グリッドシステム

Bootstrapには、グリッドという仕組みがあります。グリッドとはデバイスの画面を12分割し、管理する仕組みのことです。その12分割されたグリッド上に沿うように、コンテンツを配置していきデザインを整えます。

このグリッドを上手く使って、PC・スマホなど画面幅の異なるデバイスで見たときにもレイアウトが崩れないように設定していきます。画面幅によってグリッドの配置やサイズを変えることによって、どの画面幅でアクセスした際にも整ったレイアウトで表示できるようになっているのです。

例えば以下のようにPCの場合はコンテンツが横並びになりますが、スマホで見た場合にはコンテンツが縦並びになります。

file

ブレークポイント

Bootstrapには画面のサイズによってレイアウトを変更できる特徴があります。ユーザーの環境がどれくらいの大きさなのかを判定して、その表示を変えます。例えば大きなPCで見てたらこの画面、小さなスマホで見ていたらこの画面、タブレットで見てたらこの画面などを切り分けることができるのです。

下の図はいろいろなデバイスの幅と表示を示したものになります。５つの基準ポイントがありますね。このポイントの幅を超えた、またはこのポイントより小さくなった時に、レイアウトなどが変わります。この基準ポイントを「ブレークポイント」と呼びます。グリッドシステムでは、ブレークポイントを指定してコンテンツを配置します。

file

また、Bootstrapでは各ブレークポイントに名前が付けられています。横幅が575までは「Extra small」など、各幅で名前がついていますね。後に実践してますが、この名前をつけることでデバイスの幅によって見せ方を変更できるようにするのです。

	Extra small	Small	Medium	Large	Extra large
画面幅	～575px	576～767px	768～991px	992～1199px	1200px～

グリッドシステム以外でもブレークポイントでのCSSの指定変更は使われていますので、覚えておくと良いでしょう。

レイアウトの為のCSS

Bootstrapでは、レイアウトを簡単に行う為のクラスが用意されています。この項目で紹介するクラスは、グリッドシステムを使う時に必要となるものです。

file

・containerを使う

Bootstrapでは「container（コンテナ）」というCSSクラスが用意されています。これは、コンテンツを入れる入れ物の様なものです。また、中に入れるコンテンツを画面中央に配置します。

file

Skillhubの講座をやっていただいた方はwrapperと言ったほうがピンとくるかもしれません。自分で作成する場合は「wrapper」などと名前を付けているクラスやidがありましたね。containerはそれと同じように「すべてを包む」という意味合いを持つものになります。

containerクラスは横幅が最大1170pxで、画面幅が小さくなるとコンテナの幅も小さくなります。

「container」のCSSを見てみましょう。

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

@media (min-width: 768px) { 
    .container { 
        width: 750px; 
        } 
    } 

@media (min-width: 992px) { 
    .container { 
        width: 970px; 
        } 
    } 

@media (min-width: 1200px) { 
    .container { 
        width: 1170px; 
        } 
    }

・メディアクエリを知る

ここで見慣れない@mediaというものが出てきましたね。これらはメディアクエリと呼ばれ「その画面サイズが ..px 以上だった場合は、こうやって表示してね」と書くことができるものになります。

例えば以下の例だったら「画面サイズが480px以上だったらh1の色は赤にしてね」という設定をしています。

@media screen and (min-width:480px) { 
    /*　画面サイズが480px以上だったらここを読み込む　*/
        h1 { color: red;}
}

もうお気づきですかね。そう、これは各デバイスの幅によって設定を変更するためのものになります。

スマホ => 「画面サイズが480px以上だったらh1の色は赤にしてね」
タブレット => 「画面サイズが786px以上だったらh1の色は緑にしてね」
PC => 「画面サイズが1024px以上だったらh1の色は青にしてね」

と、複数指定する場合は下記のように書きます。

@media screen and (min-width:480px) { 
/*　【スマホ用】　画面サイズが480px以上だったらここを読み込む　*/
    h1 { color: red;}
}
@media screen and (min-width:768px) { 
/*　【タブレット用】　画面サイズが768px以上だったらここを読み込む　*/
    h1 { color: green;}
}
@media screen and (min-width:1024px) { 
/*　【PC用】　画面サイズが1024px以上だったらここを読み込む　*/
    h1 { color: blue;}
}

これらが理解できたらもう一度containerに関するコードを見てみましょう。 containerの幅をデバイスごとに変えているのが理解できますね。

.container { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

@media (min-width: 768px) { 
    .container { 
        width: 750px; 
        } 
    } 

@media (min-width: 992px) { 
    .container { 
        width: 970px; 
        } 
    } 

@media (min-width: 1200px) { 
    .container { 
        width: 1170px; 
        } 
    }

・container-fluid

container（コンテナ）にはもう一つ「container-fluid」というクラスもあります。こちらは「width: 100%」と指定したときのように、横幅はどのデバイスでも画面幅全体となります。 file

container-fluidはメディアクエリの設定は特にありません。それは、そうですよね。どのデバイスで見ても横幅100%なのですから。

rowクラスで行の設定

「row」とは行という意味を持つクラスです。横並びにしたいコンテンツがある時、それらをこのrowクラスで囲うという使い方をします。

file

containerの中に入れ無くとも機能しますが、今回はcontainerの中に入れていくことで説明を進めます。

コードと出来上がりは以下のようなイメージになります。 file

col（カラム）

「カラム」とは12分割した列のことを言います。このクラスは「col」の後にブレークポイントとカラム数指定の記述を加える事が出来ます。

たとえば、画面幅が768px以上の時、コンテンツの幅は６カラム(グリッド)分にしたいとします。その場合の、実際のコードは以下のようになります。

file

「col-ブレークポイント-カラム数」という形のクラスにするという事ですね。

ブレークポイントは以下表の「クラス名」の記述を使います。

	Extra small	Small	Medium	Large	Extra large
画面幅	～575px	576～767px	768～991px	992～1199px	1200px～
クラス名	なし	sm	md	lg	xl

上記例では、768px(md)以上の時は６カラムとしました。この場合、768px以下の画面幅になったときは、12カラム分の横幅に広がります。12カラムということは1列になります。これは、どんなカラム数を指定していたとしても、指定された画面幅以下の場合には12カラムの幅になるように、BootstrapのCSSに記述されている為です。

また、横並びで複数のコンテンツを並べて配置したいという時があるかと思います。そのような時は、横一列（rowの中）で合計が12カラムとなるように指定しなければなりません。

例えば、２つのコンテンツを、それぞれ同じ幅で配置したいとします。その時は以下のようなコードとなります。

<div class=”container”>
  <div class=”row”>
    <div class=”col-md-6”>コンテンツ</div>
    <div class=”col-md-6”>コンテンツ</div>
  </div>
</div>

◆実習:コードを書いてみましょう

では、実際にコードを書いてグリッドシステムを使用してみましょう。

実習のすすめかた

前レッスンで作成した「bootstrap_works」フォルダに、各実習名のhtmlファイルを作成しください。
今回はファイル名をgrid.htmlとします。

以下、どちらかの方法でgrid.htmlを作成して下さい。

前レッスンで作成したindex.htmlを複製
以下のhtmlコードを貼り付ける

grid.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>


    <!-- Bootstrap JavaScript  -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>

※今回以降のレッスン・実習は、htmlファイルにBootstrapを導入（読み込み）済みであることを前提として進めます。 同様の手順で実習用のhtmlファイルを作成して下さい。

実習で使用する画像

画像はこのレッスンページ「素材」欄よりダウンロードしてご利用下さい。 フォルダ内の画像は別のレッスンでも使用します。

下図のようにファイルが揃っていてば準備OKです。

file

コードを書く

下図は画面の表示領域と、Bootstlapの「col」配置を表した図です。表示領域とは、画面サイズというような意味です。ブレークポイントに合わせて表示を変更出来るように、ユーザーの画面サイズを読み込んでいるようなイメージです。

file

グリッドシステムを使用して、コンテンツを配置していきます。今回は上図のように2つのコンテンツを配置してみましょう。

それぞれ、幅が同じになるようにカラム数は６とします。また、ブレークポイントはmdで設定します。コンテンツは、画像とテキストにしてあります。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="images/test.jpg">
        </div>
        <div class="col-md-6">
            <h1>sampletext</h1>
            <p>samplet extsampletextsam pletextsampletextsamplete xtsampl etextsa mpletextsamplet
              exts amplet extsamp lete xtsam p letext sampl ete xtsamp letextsample text sam plet ext 
                sa mp l etext sa mp let exts amplete xtsample textsa mplet extsam ple text
            </p>
        </div>
    </div>
</div>

ブラウザで表示を確認してみましょう。

file

画像が大きすぎてはみ出て、テキストと画像が重なってしまっていますね。

こういう場合にはbootstrapの画像を操作するためのクラスを使うと便利です。「img-fluid」というクラスは画像の大きさをレスポンシブに保ってくれます。以下のようにimgタグにクラスを追加してみて下さい。

<img src="images/test.jpg" class="img-fluid">

しっかりと幅に合わせて、画像が小さくなってくれました。

file

ブラウザで表示を確かめる

ブラウザの幅を変えて、どのように表示されるか見てみましょう。 PCで見た場合は以下のように表示されればOKです。

file

次に、画面幅を小さくするとどのように表示が変わるか確認してみます。ブラウザを縮小して試してみてください。段々と、画像が小さくなり、テキストエリアも横幅が狭くなっていき縦に伸びていくはずです。

そして、指定したブレークポイントを過ぎると・・・以下のように、横並びから縦並びに変わります。

file

◎まとめ

・レスポンシブの為のCSSもあらかじめ用意されている

・Bootstrapでは、レスポンシブデザインに最適なグリッドシステムというものが用意されている

・グリッドシステムとは、デバイスの画面を１２分割し、グリッド上に沿うように、コンテンツを配置する事

・画面幅によって表示をかえる時、表示が変わる基準点をブレークポイントと呼ぶ

・グリッドシステムでは「col-ブレークポイント-カラム数」という形のクラスでカラムを作り、レスポンシブ対応にする

レッスン一覧へ