CSS

Bootstrapのグリッドシステムの使い方その1【Grid system】

どうも、つよぽんです!

今回はBootstrapのグリッドシステム(Grid system)の使い方についての解説をします。

今回の記事は次のような方に向けて書きました。

想定読者
  • Bootstrapのグリッドシステムって何?
  • Bootstrapのグリッドシステムを使ってページをキレイに整えたい

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
BootstrapのGridシステムを使うパート1CSSのBootstrapの1つの機能である「Gridシステム」を使うと、画面幅を12分割して表示要素をセット出来るようになります。また、画面サイズに応じて表示を切り替えることが出来るためレスポンシブなWebページを作ることも可能となります。...

それでは次の内容で話を進めていきます。

今回の内容
  1. Bootstrapのグリッドシステムとは
  2. Bootstrapのグリッドシステムの基本的な使い方

 

Bootstrapのグリッドシステムとは

Bootstrapのグリッドシステム(Grid system)とは「Webページを縦列に12分割して、分割してできた各スペースに表示要素を配置することが出来る」システムのことです。

12分割した様子が視覚的にわかる例12分割した様子が視覚的にわかる例

上記のサンプルコードは以下のリンクから直接確認することもできます。

Gridシステムのサンプル1

上の画像右側のサンプルコードでは13個のdiv要素を記述しています。(赤枠内を参照)

しかし、画像左側の出力結果を見ると1行に配置されている要素は全部で12個までで、13個目のdivは、新しく次の行(2行目)に表示されているのがわかります。

さらにいうと、13個目のdivは、1行目の12個分のdiv要素と同じ数分横幅が広がっています。

1行目と2行目で使われているdiv要素の12分割されたスペースに対する挙動をまとめると次のとおりです。

1行目と2行目のdivの挙動
  • 1行目の12個のdiv要素は、12分割された各スペースに対して、1個のスペースにつき1個のdiv要素が割り当てられている
  • 2行目の1個のdiv要素に対しては、12分割された各スペースの内、12個のスペースに対して1個のdiv要素が割り当てられている

このように、12分割されたWebページのスペースを埋めるように表示要素が配置される機能がBootstrapに用意されているグリッドシステム(Grid system)です。

Bootstrapのグリッドシステムの基本的な使い方

この章ではBootstrapのグリッドシステムの基本的な使い方について解説していきます。

Bootstrapのグリッドシステムを使うには次の親子関係をもつ表示要素を用意する必要があります。

グリッドシステムの親子関係
  1. 1番上の親要素 : class属性値に「container」をもつ要素を用意する
  2. 2番目の親要素 : class属性値に「row」をもつ要素を用意する
  3. 3番目(1番下の要素) : class属性値に「col-[サイズ]」もしくは「col-[サイズ]-[1~12の数]」をもつ要素を用意する

の「container」については以下の記事でも解説しているので詳しく知りたい方は以下の記事を参照していただけたらと思います。

あわせて読みたい
Bootstrapのcontainerとは【使い方・図解】Bootstrapを使うことによってカンタンにキレイなページを作ることが出来ます。Bootstrapでページを整理するために必ず使われる機能として「container」があります。containerとは何か、どうやって使うかを解説します。...

の「row」に関しては、英語の意味の通り「行」を表し、「row」で明示的に改行することが可能になります。

の「col-[サイズ]」、もしくは「col-[サイズ]-[1~12の数]」をセットした表示要素は、12分割されたスペースを共有してセットされます。

ここで、③で出てきた「サイズ」と「1~12の数」についてもう少し具体的に解説します。

まずは、わかりやすい「1~12の数」の値について説明します。

1~12の数

1~12の数が意味するところは「12分割」から来ています。

つまり、col-[サイズ]-1とすればスペース1個分を、col-[サイズ]-9とすればスペース9個分を表示要素に割り当てることが可能になります。

また、もし数を指定しなかった場合は、12分割したスペースの内、残っているスペースを埋めるように自動で数が割り当てられます

以下の画像の赤枠内のコードを見ると、最初の2つのdiv要素は「col-sm-1」がセットされていた、3つ目のdiv要素に関しては「col-sm」と数が省略されているのがわかります。

その結果、画像左の出力内容の1行の要素を見ると、最初の2つのdiv要素はスペース1個分ずつの大きさで表示されているのに対して、3つ目のdiv要素は残っているスペース10個分(=12-2)の大きさで表示されています。

1~12の値を明示したときの挙動1~12の値を明示したときの挙動

上記のサンプルコードは以下のリンクから直接確認することもできます。

Gridシステムのサンプル3

次に上の画像の青枠内を見てみましょう。

赤枠内のときと同じように、「col-sm-1」のように数を明示しているのと、「col-sm」のように数を明示していないパターンの2種類があります。

赤枠内のときとの違いは「col-sm」のように数を明示していない要素が2つ(複数)あるkとです。

数を明示していない要素が複数ある場合は、残っているスペースを分割して埋めるようにスペースが割り当てられます。

上の画像の青枠内の例では、「col-sm-1」が1個、「col-sm-2」が2個、合計5個分のスペースが明示的にセットされています。(5 = 1 + 2 + 2)

このときに残っているスペースは7個分となります。(7 = 12 – 5)

そして、「col-sm」の数を明示していない要素が2つあるので、残っている7個分のスペースを3.5個ずつ使うようにスペースが割り当てられます。(3.5 = 7 ÷ 2)

最後に緑枠オレンジ枠を見ていきます。

こちらはどちらも全ての要素が「col-sm-9」「col-sm-2」「col-sm-11」のように明示的に数を指定しています。

しかし、12個分のスペースを全て埋めるように数を指定していません。その結果、一番右側に1個分の空きスペースが出来ているのが確認できます。

このように、意図的にスペースを使わないということも可能となります。

サイズ

サイズ」とは次の4つのいずれかの値が入ります。

サイズで利用できる値
  • sm : 576px以上
  • md : 768px以上
  • lg : 992px以上
  • xl : 1200px以上

上記4つの値(sm, md, lg, xl)の使い分けに関しては、以下の記事でレスポンシブなページを作るときに利用するというのを解説しました。

あわせて読みたい
BootstrapのNavbarの使い方【メニュー・色・ロゴ】Bootstrapのnavbarの機能を使うことでTwitterやFacebookなどでよく見かける画面上部にあるナビゲーションバーを簡単に実装することが出来ます。また、画面サイズに応じてメニュー表示を切り替えるレスポンシブデザインも簡単に出来ます。...

サイズを利用したBootstrapのグリッドシステムの使い方は以下の学習コンテンツのスライドでもまとめているのでそちらも参考にしていただけたらと思います。

あわせて読みたい
BootstrapのGridシステムを使うパート2BootstrapのGridシステムを使うとレスポンシブなページを作ることも簡単にできます。前回のGridシステムパート1で学習した知識があれば、すぐにレスポンシブなページを作ることが可能となります。...

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. Bootstrapのグリッドシステムはページを12個のスペースに分割して、分割したスペースに表示要素を配置できる機能のこと
  2. Bootstrapのグリッドシステムを使うには「container」「row」「col-[サイズ]」(もしくは「col-[サイズ]-[1~12の数]」)を利用する
  3. 12個のスペースの内、何個のスペースを使うかは「1~12の数」を指定することで決めることが出来る
  4. 1~12の数」の指定を省略したときは、12分割されたスペースの内、残っているスペースを埋めるように表示要素がセットされる。(表示要素が複数ある場合は残りのスペースを分割して割り当てられる)
  5. サイズ」の指定は「sm」「md」「lg」「xl」のいずれかを使う。

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
BootstrapのGridシステムを使うパート1CSSのBootstrapの1つの機能である「Gridシステム」を使うと、画面幅を12分割して表示要素をセット出来るようになります。また、画面サイズに応じて表示を切り替えることが出来るためレスポンシブなWebページを作ることも可能となります。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です