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

どうも、つよぽんです！

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

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

想定読者

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

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

Bootstrapのcontainerとは

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

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

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

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

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

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

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

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

おさえておくべき2点

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

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

この章では、実際に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」をセットする

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

誰向けのプラン？

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

プラン対象者

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

プラン内容は？

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

プラン内容

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

1日1回カフェでコーヒー1杯頼むくらいの金額で参加できます

「1日1回、カフェでコーヒー1杯分くらいの値段(約330円)」で以下の環境が手に入るとイメージして頂けたらと思います。

コードを添削してもらえる
学習したことのアウトプットに対してフィードバックしてもらえる
いつでも質問出来る
週1のオンライン講義に参加できる
過去のオンライン講義動画を好きな時間に復習できる(いつでも閲覧可能)
不定期で行うオフラインでの勉強会に参加できる(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
自分の住まいの近場のメンティーさん同士で集まって、オフラインで勉強会を開くのも可能(初めて開催する場合は事前に僕に連絡をいただけたらと思います)

学習教材には、このサイトで用意している「【学習コンテンツ】Web開発」を使います。

「【学習コンテンツ】Web開発」を使って学習を進めることで、Webのフロントエンドとバックエンドのスキルを身につけていくことができます。

プログラミングスクールとの比較

プログラミングスクールに通う場合は1ヶ月で10万円以上するところも多いですし、3ヶ月で50万円、更には100万円するところもあります。

プログラミングスクールの値段が高い理由は、「プログラミングスクールで働いている人の人件費」「就職のサポート」なども含まれているからです。

「10万円・50万円・100万円」のいずれの場合も、自己投資とはいえ、支払うのにはだいぶ勇気がいる金額かと思います。

オススメの学習方法

個人的にオススメするのは、プログラミングのできるメンター(師匠)を見つけて、まずは1ヶ月プログラミング学習をしてみて、自分にプログラミングが向いているかどうか確かめてみることです。

「10万円・50万円・100万円」を払って、学習していく中で「やっぱり自分にはプログラミングは向いてない」と判断した場合、その金額はかなりの痛手となります。

そのため、まずは「これくらいの金額なら最悪失っても痛くないな」の値段で教えてくれるメンターを見つけて、そのメンターに色々と質問をしてみましょう。

それで、「良さそうだな」と思ったら教えてもらうといった流れで学習を始めると、金額もだいぶ節約できます。

注意点

ただし、参加者が増えてきたら、1人1人へのサポートの質を維持するのが難しくなるので、値上げする可能性もあります。

値上げする理由は次の以下の理由となります。

値段を上げて参加ハードルをあげることで、自己解決スキルも身につけたいと考えている学習意欲の高い人だけが参加するようになる
- 調べたらすぐにわかることを、自分で調べずに何でもかんでも質問すると、自己解決スキルも身につかない
- 更に、他のメンティーさんの対応する時間が取れなくなりサポートの質の低下にも繋がる