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ページを作ることも可能となります。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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