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

現行最新版（Bootstrap 5）講座をリリースしました

→Bootstrap 5講座のご受講はこちら

吉田先生

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

• Bootstrapテンプレートの中身
• グリッドシステム
• ブレークポイント
• レイアウトの為のCSS
• row
• col（カラム）
• 使い方
• まとめ

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

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

それはつまり、HTML/CSS/JavaScriptファイルまたはコードのことです。Bootstrapが用意してくれているクラスなどを指定することで簡単にデザインを作成することができます。以下イメージ内では、ボタンが例として使われています。これも、ボタンの為のCSSが予め用意されているので、「btn-primary」というクラスの指定だけでボタンが作れるのです。

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

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

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

◎グリッドシステム

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

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

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

◎ブレークポイント

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

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

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

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

◎レイアウトの為のCSS

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

containerを使う

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

吉田先生

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-fluid」です。こちらは「width: 100%」と指定したときのように、横幅はどのデバイスでも画面幅全体となります。

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

rowクラスで行の設定

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

containerの中に入れる必要はありませんが、今回はcontainerの中に入れていくことで説明を進めます。コードと出来上がりは以下のようなイメージになります。

col（カラム）

「カラム」とは12分割した列のことを言います。このクラスは、「col」の後にブレークポイントとカラム数指定の記述を加える事が出来ます。たとえば、画面幅が768px以上の時、コンテンツの幅は６カラム(グリッド)分にしたいとします。その場合の、実際のコードは以下のようになります。

「col-ブレークポイント-カラム数」という形のクラスにするという事ですね。ブレークポイントは以下表の「クラス名」の記述を使います。

上記例では、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のグリッドを書いてみましょう

では、実際にコードを書きグリッドシステムを使用してみましょう。皆さんも、テキストエディタで試してみてください。今回は、CDNでBootstrapを導入している想定で進めて行きます。そして、前章を参考に「index.html」を作成してください。

これは、画面の表示領域を設定しています。表示領域とは、画面サイズというような意味です。ユーザーの画面サイズを、読み込んでいるようなイメージです。

そして、

内にグリッドシステムを使用して、コンテンツを配置していきます。今回は２つのコンテンツを配置してみます。それぞれ、幅が同じになるようにカラム数は６とします。また、ブレークポイントは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>

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

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

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

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

ブラウザで確かめる

では、実際にブラウザでどのように表示されるか見てみましょう。以下のように表示されればOKです。

次に、画面幅を小さくするとどのように表示が変わるか確認してみます。ブラウザを縮小して試してみてください。段々と、画像が小さくなり、テキストエリアも横幅が狭くなっていき縦に伸びていくはずです。そして、指定したブレークポイントを過ぎると以下のように、横並びから縦並びに変わります。

◎まとめ

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

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

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

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

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