どうも、つよぽんです！
今回はBootstrapでWebページをキレイにするために必要な知識である「container」について解説します。
今回の記事は次のような方に向けて書きました。
- Bootstrapを使ってキレイWebページを作りたい
- Bootstrapのcontainerを使って出来ることを知りたい
今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。
それでは次の内容で話を進めていきます。
- Bootstrapのcontainerとは
- Bootstrapのcontainerを実際に使ってみる
目次
Bootstrapのcontainerとは
Bootstrapのcontainerとは、画面サイズや設定に応じて「表示要素を中央に配置する」「表示要素を横幅いっぱいに広げる」ことが出来る機能です。
特に画面サイズに応じて表示の切り替えを行えるWebページのデザインのことを「レスポンシブWebデザイン」とも呼んだりします。
レスポンシブWebデザインについてもっと詳しく知りたい方は以下の記事が参考になるかと思います。
言葉だけだと「画面サイズに応じて表示を切り替える」というのが伝わりづらいかと思いますので以下の2枚の画像を見ていただけたらと思います。
以下の2枚の画像ともに、左側が『画面サイズが大きいときの表示』、右側が『画面サイズが小さい時の表示』となっており、画面サイズに応じて表示が異なっているのがわかるかと思います。
レスポンシブデザインのサンプルその1
レスポンシブデザインのサンプルその2Bootstrapのcontainerで出来ることに関してはさきほども述べたように次の2点をおさえておけば良いでしょう。
- Webページをキレイに整えるためのベースを作れる
- 画面サイズに応じて表示を切り替えることが出来る
Bootstrapのcontainerを実際に使ってみる
この章では、実際にBootstrapのcontainerの使い方をサンプルコードを使いながら解説していきます。
この章の画像内で使っているサンプルコードは以下のリンクから直接確認することも出来ます。
Containerの挙動(画面サイズが大きいとき)
画面サイズが大きいときのcontainerの挙動まず、そもそもBootstrapのcontainerを使うためには何をすればよいのでしょうか？
使い方はカンタンで、表示グループの一番上の親要素のclass属性値に「container」をつけるだけです。
上の画像のサンプルコード内に緑枠で囲っている部分があり、一番外側のdiv要素のclass属性値に「container」がセットされているのがわかるかと思います。
それに対して、赤枠で囲っている部分では「container」を使っていません。
上記画像の左側は右側のHTMLコードの出力結果となりますが、containerを使っている要素と使っていない要素で出力結果に次の違いがあるのがわかります。
- containerを使っていない場合
- 表示要素の左右にmarginが入らず画面中央に配置されない
- 表示要素内にpaddingもセットされていない
- containerを使っている場合
- 表示要素の左右にmarginが入り、画面中央に配置される
- 表示要素内にpaddingがセットされている
上記のように「container」というclass属性をセットするだけで、良い感じのスタイルが自動でセットされるようになるのです。
Containerの挙動(画面サイズが小さいとき)
画面サイズが小さいときのcontainerの挙動上記画像のHTMLコードは、前の項目の「Containerの挙動(画面サイズが大きいとき)」と全く同じなので、コード内容は前の項目の説明を参照していただけたらと思います。
画面サイズが小さいときに「container」を使った表示要素は先程と異なり、表示要素の左右にあったmarginがなくなり、表示要素が画面いっぱいに広がるようになりました。
このように、画面サイズに応じて表示要素がキレイに表示されるように自動でスタイルが変更されます。
そして、marginはなくなりました、表示要素内のpaddingは残ったままです。
これによって画面いっぱいに表示要素が広がっても、表示要素の中身(テキストや画像など)はキレイに表示されるのです。
まとめ
今回の話をまとめると次のとおりです。
- Bootstrapのcontainerを使うことでレスポンシブWebデザインなページをカンタンに作れる
- Bootstrapのcontainerを使うためには、表示グループの一番上の親要素のclass属性値に「container」をセットする
今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。
LINE登録で無料特典を受け取る
次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。
- Webエンジニアになりたいけど何から学習を始めれば良いかわからない
- 今まで独学で頑張ってきたけど、独学に限界を感じてきた
- プログラミングは出来るけど、大きめのコードが書けない
「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。
