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; 
  } 
}

メディアクエリを知る

上記のコードで使われている、@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 { 
  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カラムとしました。
この場合、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.準備

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

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

前レッスンで作成したindex.htmlをコピーし、ファイル名をgrid.htmlに変更してください。
今回は、このgrid.htmlにコードを書いてみましょう。

2.コードを書く

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

グリッドシステムを使用して、コンテンツを配置していきます。
今回は上図のように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 extsampl etext sampletexts amplete xtsample textsa mplet extsam ple text
      </p>
    </div>
  </div>
</div>

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

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

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

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

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

3.ブラウザで確かめる

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

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

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

◎まとめ

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

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

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

無料講座一覧を見る

レッスン素材一覧

×