CSS

Bootstrapのグリッドシステムの使い方その2【レスポンシブ対応】

どうも、つよぽんです!

今回も前回に引き続き、Bootstrapのグリッドシステム(Grid system)の使い方に関するお話で、今回はレスポンシブ対応したグリッドシステムの解説となります。

Bootstrapのグリッドシステムの基本的な使い方がわからない方は、まずは以下の前回記事から読むことをオススメします。

あわせて読みたい
Bootstrapのグリッドシステムの使い方その1【Grid system】BootstrapのグリッドシステムはWebページを横12個に分割して表示要素を整える機能のことです。表示パーツに応じて「パーツAはスペース6個分使う」「パーツBはスペース3個分」「パーツCはスペース3個分」のように指定することが出来ます。...

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

想定読者
  • レスポンシブ対応って何?
  • 画面サイズに応じてグリッドシステムの1行あたりの表示件数を変更したい

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

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

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

今回の内容
  1. レスポンシブ対応とは
  2. Bootstrapのグリッドシステムを使ったレスポンシブ対応方法

 

レスポンシブ対応とは

まずはじめに「レスポンシブ対応」とはわからない方もいるかと思うので、あらためてレスポンシブデザインについての説明をします。

既にレスポンシブデザインについて知っている方は、次の章「Bootstrapのグリッドシステムを使ったレスポンシブ対応方法」まで飛んでいただいて問題ありません。

さきほど「レスポンシブ対応」「レスポンシブデザイン」という言葉を使いましたが、レスポンシブ対応とはレスポンシブデザインの機能が実装されたWebページのことを指します。

そして「レスポンシブデザイン」とは、パソコンやスマートフォンなど画面サイズの大きさに応じてWebページの表示が切り替わるデザインのことを言います。

Bootstrapのグリッドシステムには、この「レスポンシブデザイン」の機能をカンタンに実装できる機能が備わっているのです。

それでは次の章でBootstrapのグリッドシステムを使ってどのようにレスポンシブ対応を行うのか解説していきます。

Bootstrapのグリッドシステムを使ったレスポンシブ対応方法

あわせて読みたい
Bootstrapのグリッドシステムの使い方その1【Grid system】BootstrapのグリッドシステムはWebページを横12個に分割して表示要素を整える機能のことです。表示パーツに応じて「パーツAはスペース6個分使う」「パーツBはスペース3個分」「パーツCはスペース3個分」のように指定することが出来ます。...

上の前回記事のおさらいになりますが、Bootstrapのグリッドシステムを使うには次の親子関係をもつ表示要素を用意する必要があります。

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

上記3つの中で、Bootstrapのグリッドシステムでレスポンシブ対応を行うのに関係します。

col-[サイズ]-[1~12の数]」のうち、「サイズ」には次の4つのいずれかの値がセットできます。

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

上記4つの各サイズに関する情報は以下のドキュメントに書かれています。

Grid options

「[1~12の数]」に関しては、12分割されたスペースの内、何個分のスペースを使うかを指定します。

この[サイズ][1~12の数]の組み合わせより、例えば「col-lg2」とセットしたら、画面サイズがlg以上(992px)のときには、12分割されたスペースの内、2個分のスペースを使うという指定になります。

そしてレスポンシブ対応するためには、画面サイズに応じて表示要素に対するスペースの割当の数を変更する必要がありますが、その場合は「col-sm6」「com-md3」のように複数のクラス属性値をセットするだけです。

以下の画像は、「col-sm6」「com-md3」を実際にセットしている様子を表したものです。

クラス属性値に画面サイズに応じた値をセットするクラス属性値に画面サイズに応じた値をセットする

col-sm6」「com-md3」をセットすることにより、画面サイズがsm以上(576px以上)かつmd未満(768px未満)のときは、1つの要素につきスペース6個分が割り当てられるので、1行あたり2個の要素が表示されます。(2個 = 12 ÷ 6)

そして、画面サイズがmd以上(768px以上)のときは1つの要素につきスペースが3個割り当てられるので、1行あたり4個の要素が表示されます。(4個 = 12 ÷ 3)

指定のないsm未満(576px未満)のとき、1行あたり1つの要素が表示されるようになります。

以下のアニメーション画像は実際に「col-sm6」「com-md3」をセットしたコードを使って、画面サイズに応じて表示が切り替わる様子を表したものになります。

画面サイズに応じて1行あたりの要素数が切り替わる様子画面サイズに応じて1行あたりの要素数が切り替わる様子

上記画像内で使われているサンプルコードは以下のリンクから直接確認することが出来ます。

Gridシステムのサンプル4

このように、Bootstrapのグリッドシステムには「レスポンシブ対応」がカンタンに実現できる機能が備わっています。

まとめ

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

今回のまとめ
  1. レスポンシブ対応とは、レスポンシブデザインなページを実装したWebページのこと
  2. 1つのclss属性にcol-[サイズ]-[1~12の数]の値を複数セットすることで、画面サイズに応じて12分割されたスペースの内、何個のスペースの数を割り当てるか切り替えることが出来る

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

あわせて読みたい
BootstrapのGridシステムを使うパート2BootstrapのGridシステムを使うとレスポンシブなページを作ることも簡単にできます。前回のGridシステムパート1で学習した知識があれば、すぐにレスポンシブなページを作ることが可能となります。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る

 

COMMENT

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