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

吉田先生

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

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

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

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

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

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

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

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

Bootstrap5のグリッドシステム

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

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

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

Bootstrap5のブレークポイント

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

下の図はいろいろなデバイスの幅と表示を示したものになります。
6つの基準ポイントがありますね。

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

また、Bootstrapでは各ブレークポイントに名前が付けられています。

X-Small Small Medium Large Extra large Extra extra large
画面幅 ～575px 576px以上 768px以上 992px以上 1200px以上 1400px以上

後に実践していきますが、このブレークポイントの名前をつけることで、デバイスの幅によって見せ方を変更できるようにするのです。
グリッドシステム以外でもブレークポイントでのCSSの指定変更は使われていますので、覚えておくと良いでしょう。

レイアウトの為のCSS

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

Bootstrapのcontainerを使う

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

吉田先生

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

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

Bootstrapが定義している、containerクラスのCSSは以下のようになっています。

.container { 
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--bs-gutter-x,.75rem);
  padding-left: var(--bs-gutter-x,.75rem);
} 

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

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

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

@media (min-width: 1400px){
  .container { 
    max-width: 1320px; 
  } 
}

※paddingの書き方は、Bootstrapが定義しているものですので気にしなくてOKです。

メディアクエリを知る

上記のコードで使われている、@mediaという記述。
これらはメディアクエリと呼ばれる機能で、画面サイズに応じて使うCSSを切り替えることができます。

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

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

このメディアクエリの機能を使うことで、Webページを閲覧するデバイスに合わせた表示を設定しています。

複数組み合わせると、端末毎に最適な設定を細かく書くことも出来ます。
以下の条件で、書き方を見てみましょう。

  • スマホ => 「画面サイズが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 { 
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--bs-gutter-x,.75rem);
  padding-left: var(--bs-gutter-x,.75rem);
} 

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

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

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

@media (min-width: 1400px){
  .container { 
    max-width: 1320px; 
  } 
}

container-fluidを知る

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

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

行と列を作る

rowクラスで行を作る

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

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

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

col（カラム）で割合を決める

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

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

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

X-Small Small Medium Large Extra large Extra extra large
画面幅 ～575px 576px以上 768px以上 992px以上 1200px以上 1400px以上
ブレークポイント名 - sm md lg xl xxl

上記例では、画面幅768px（md）以上の時は6カラムとしました。
画面幅が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を導入している想定で進めて行きます。

1.準備

下記実習で使用する画像はサイドバーのコース素材一覧よりlesson-images.zipをダウンロードしてご利用下さい。
※フォルダ内の画像は別のレッスンでも使用します。

「images」フォルダごと、作成中の“bootstrap-works”に移動させると楽です。

前レッスンで作成したindex.htmlを複製し、ファイル名をgrid.htmlに変更してください。
エディタの「名前をつけて保存（別名で保存）」を使うと、簡単に複製できますよ。

今回は、このgrid.htmlにコードを書いてみましょう。
<h1>Hello, world!</h1>は要らないので、削除してしまって構いません。

2.コードを書く

下図は画面の表示領域と、Bootstlapの「col」配置を表した図です。

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

グリッドシステムを使用して、上図のようになるようコンテンツを配置してみましょう。

それぞれ、幅が同じになるようにカラム数は６とします。
ブレークポイントは md に設定し、それぞれ画像と文字を入れてください。

grid.html 

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Gridレッスン</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <img src="images/test.jpg" alt="">
            </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 sample text sampletext sampletext samplete xtsample textsa mplet extsam ple text
              </p>
            </div>
          </div>
        </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

htmlを保存して、パソコンのブラウザで表示を確認してみましょう。
画像がはみ出て、テキストと画像が重なってしまっていますね。

こういう場合にはbootstrapの画像を操作するためのクラスを使うと便利です。
img-fluidクラスは、画像の幅を親要素からはみ出さない用に設定してくれます。
表示をレスポンシブに保ってくれる、とても便利なクラスです。

以下のように、imgタグにimg-fluidクラスを追加してみて下さい。

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

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

3.ブラウザで確かめる

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

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

そして、指定したブレークポイントを過ぎると・・・
以下のように、横並びから縦並びに変わっていれば成功です！

レッスンの実習見本について

各レッスンの“レッスン素材”には、実習の見本ファイルをご用意しています。
上手く行かないところがあれば、確認用としてご活用下さい。

なお、アップロードしているファイル・フォルダ内に画像は含まれていません。
ブラウザで表示確認をする際には、作成中のフォルダにファイルを移動させる・画像パスを直すなどしてご確認下さい。

◎まとめ

  • Bootstrapにはレスポンシブの為のCSSもあらかじめ用意されている
  • Bootstrapでは、レスポンシブデザインに最適なグリッドシステムというものが用意されている
  • Bootstrapのグリッドシステムとは、デバイスの画面を１２分割し、グリッド上に沿うように、コンテンツを配置する事
  • 画面幅によって表示をかえる時、表示が変わる基準点をブレークポイントと呼ぶ
  • グリッドシステムでは「col-ブレークポイント-カラム数」という形のクラスでカラムを作り、レスポンシブ対応にする
前のレッスン 次のレッスン レッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

コース素材一覧

レッスン素材一覧

×