CSS

Bootstrapのcontainerとは【使い方・図解】

どうも、つよぽんです!

今回はBootstrapでWebページをキレイにするために必要な知識である「containerについて解説します。

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

想定読者
  • Bootstrapを使ってキレイWebページを作りたい
  • Bootstrapのcontainerを使って出来ることを知りたい

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

あわせて読みたい
Bootstrapのcontainerを使うBootstrapではWebページのレイアウトを綺麗にするためのベースとなる機能があります。それは「container」というものです。containerを使うことで、画面サイズに応じて表示要素の位置を良い感じに整理してくれます。...

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

今回の内容
  1. Bootstrapのcontainerとは
  2. Bootstrapのcontainerを実際に使ってみる

 

Bootstrapのcontainerとは

Bootstrapのcontainerとは、画面サイズや設定に応じて「表示要素を中央に配置する」「表示要素を横幅いっぱいに広げる」ことが出来る機能です。

特に画面サイズに応じて表示の切り替えを行えるWebページのデザインのことを「レスポンシブWebデザイン」とも呼んだりします。

レスポンシブWebデザインについてもっと詳しく知りたい方は以下の記事が参考になるかと思います。

  1. 必読!5分でわかるレスポンシブWebデザインまとめ
  2. レスポンシブWebデザインについて知っておきたいこと【作り方入門編】

言葉だけだと「画面サイズに応じて表示を切り替える」というのが伝わりづらいかと思いますので以下の2枚の画像を見ていただけたらと思います。

以下の2枚の画像ともに、左側が『画面サイズが大きいときの表示』、右側が『画面サイズが小さい時の表示』となっており、画面サイズに応じて表示が異なっているのがわかるかと思います。

レスポンシブデザインのサンプルその1レスポンシブデザインのサンプルその1
レスポンシブデザインのサンプルその2レスポンシブデザインのサンプルその2

Bootstrapのcontainerで出来ることに関してはさきほども述べたように次の2点をおさえておけば良いでしょう。

おさえておくべき2点
  1. Webページをキレイに整えるためのベースを作れる
  2. 画面サイズに応じて表示を切り替えることが出来る

Bootstrapのcontainerを実際に使ってみる

この章では、実際にBootstrapのcontainerの使い方をサンプルコードを使いながら解説していきます。

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

Bootstrapのcontainerサンプル

Containerの挙動(画面サイズが大きいとき)

画面サイズが大きいときのcontainerの挙動画面サイズが大きいときのcontainerの挙動

まず、そもそもBootstrapのcontainerを使うためには何をすればよいのでしょうか?

使い方はカンタンで、表示グループの一番上の親要素のclass属性値に「container」をつけるだけです。

上の画像のサンプルコード内に緑枠で囲っている部分があり、一番外側のdiv要素のclass属性値に「container」がセットされているのがわかるかと思います。

それに対して、赤枠で囲っている部分では「container」を使っていません。

上記画像の左側は右側のHTMLコードの出力結果となりますが、containerを使っている要素使っていない要素で出力結果に次の違いがあるのがわかります。

出力結果の違い
  1. containerを使っていない場合
    • 表示要素の左右にmarginが入らず画面中央に配置されない
    • 表示要素内にpaddingもセットされていない
  2. containerを使っている場合
    • 表示要素の左右にmarginが入り、画面中央に配置される
    • 表示要素内にpaddingがセットされている

上記のように「container」というclass属性をセットするだけで、良い感じのスタイルが自動でセットされるようになるのです。

Containerの挙動(画面サイズが小さいとき)

画面サイズが小さいときのcontainerの挙動画面サイズが小さいときのcontainerの挙動

上記画像のHTMLコードは、前の項目の「Containerの挙動(画面サイズが大きいとき)」と全く同じなので、コード内容は前の項目の説明を参照していただけたらと思います。

画面サイズが小さいときに「container」を使った表示要素は先程と異なり、表示要素の左右にあったmarginがなくなり、表示要素が画面いっぱいに広がるようになりました。

このように、画面サイズに応じて表示要素がキレイに表示されるように自動でスタイルが変更されます。

そして、marginはなくなりました、表示要素内のpaddingは残ったままです。

これによって画面いっぱいに表示要素が広がっても、表示要素の中身(テキストや画像など)はキレイに表示されるのです。

まとめ

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

今回のまとめ
  1. Bootstrapのcontainerを使うことでレスポンシブWebデザインなページをカンタンに作れる
  2. Bootstrapのcontainerを使うためには、表示グループの一番上の親要素のclass属性値に「container」をセットする

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

あわせて読みたい
Bootstrapのcontainerを使うBootstrapではWebページのレイアウトを綺麗にするためのベースとなる機能があります。それは「container」というものです。containerを使うことで、画面サイズに応じて表示要素の位置を良い感じに整理してくれます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る

 

COMMENT

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