どうも、つよぽんです!
今回はBootstrapでWebページをキレイにするために必要な知識である「container」について解説します。
今回の記事は次のような方に向けて書きました。
- Bootstrapを使ってキレイWebページを作りたい
- Bootstrapのcontainerを使って出来ることを知りたい
今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

それでは次の内容で話を進めていきます。
- Bootstrapのcontainerとは
- Bootstrapのcontainerを実際に使ってみる
目次
Bootstrapのcontainerとは

Bootstrapのcontainerとは、画面サイズや設定に応じて「表示要素を中央に配置する」「表示要素を横幅いっぱいに広げる」ことが出来る機能です。
特に画面サイズに応じて表示の切り替えを行えるWebページのデザインのことを「レスポンシブWebデザイン」とも呼んだりします。
レスポンシブWebデザインについてもっと詳しく知りたい方は以下の記事が参考になるかと思います。
言葉だけだと「画面サイズに応じて表示を切り替える」というのが伝わりづらいかと思いますので以下の2枚の画像を見ていただけたらと思います。
以下の2枚の画像ともに、左側が『画面サイズが大きいときの表示』、右側が『画面サイズが小さい時の表示』となっており、画面サイズに応じて表示が異なっているのがわかるかと思います。
Bootstrapのcontainerで出来ることに関してはさきほども述べたように次の2点をおさえておけば良いでしょう。
- Webページをキレイに整えるためのベースを作れる
- 画面サイズに応じて表示を切り替えることが出来る
Bootstrapのcontainerを実際に使ってみる

この章では、実際にBootstrapのcontainerの使い方をサンプルコードを使いながら解説していきます。
この章の画像内で使っているサンプルコードは以下のリンクから直接確認することも出来ます。
Containerの挙動(画面サイズが大きいとき)
まず、そもそもBootstrapのcontainerを使うためには何をすればよいのでしょうか?
使い方はカンタンで、表示グループの一番上の親要素のclass属性値に「container」をつけるだけです。
上の画像のサンプルコード内に緑枠で囲っている部分があり、一番外側のdiv要素のclass属性値に「container」がセットされているのがわかるかと思います。
それに対して、赤枠で囲っている部分では「container」を使っていません。
上記画像の左側は右側のHTMLコードの出力結果となりますが、containerを使っている要素と使っていない要素で出力結果に次の違いがあるのがわかります。
- containerを使っていない場合
- 表示要素の左右にmarginが入らず画面中央に配置されない
- 表示要素内にpaddingもセットされていない
- containerを使っている場合
- 表示要素の左右にmarginが入り、画面中央に配置される
- 表示要素内にpaddingがセットされている
上記のように「container」というclass属性をセットするだけで、良い感じのスタイルが自動でセットされるようになるのです。
Containerの挙動(画面サイズが小さいとき)
上記画像のHTMLコードは、前の項目の「Containerの挙動(画面サイズが大きいとき)」と全く同じなので、コード内容は前の項目の説明を参照していただけたらと思います。
画面サイズが小さいときに「container」を使った表示要素は先程と異なり、表示要素の左右にあったmarginがなくなり、表示要素が画面いっぱいに広がるようになりました。
このように、画面サイズに応じて表示要素がキレイに表示されるように自動でスタイルが変更されます。
そして、marginはなくなりました、表示要素内のpaddingは残ったままです。
これによって画面いっぱいに表示要素が広がっても、表示要素の中身(テキストや画像など)はキレイに表示されるのです。
まとめ
今回の話をまとめると次のとおりです。
- Bootstrapのcontainerを使うことでレスポンシブWebデザインなページをカンタンに作れる
- Bootstrapのcontainerを使うためには、表示グループの一番上の親要素のclass属性値に「container」をセットする
今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。


Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。
このプランでは、主に「【学習コンテンツ】Web開発」を使って学習を進めていただきます。

誰向けのプラン?
こちらのプランは次のような方に向けて作られています。
- Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
- Webエンジニアになるまでの学習プランがあると助かる
- 学習していてわからないところが出てきたときに質問したい
- コードレビューして欲しい
- オンライン講義に参加したい
- 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
- おすすめの学習教材を知りたい
- Webフロントエンド・バックエンドを学習したい
- フルスタックエンジニアになりたい
- 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
- 将来フリーランスになることを目指している
プラン内容は?
『【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。
- Web白熱教室の学習コンテンツをメインに、指定した教材を使って学習する (学習プランに沿って学習を進めていただきます。)
- 学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
- プラン契約者が参加するSlackグループにて質問し放題
- Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
- 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
- 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)
- 不定期で行うオフラインでの勉強会に参加(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
その他注意点
1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。
プラン契約者数が35人に達したら値上げする予定です
現在の値段は10000円です。
つまり、「月の飲み会3回くらいの金額」となります。
飲み会に行く代わりに、学習時間を優先すると考えれば自己投資としてはだいぶリーズナブルかと思います。
「1日1回、カフェでコーヒー1杯分くらいの値段(約330円)」で以下の環境が手に入るとイメージして頂けたらと思います。
- コードを添削してもらえる
- 学習したことのアウトプットに対してフィードバックしてもらえる
- いつでも質問出来る
- 週1のオンライン講義に参加できる
- 過去のオンライン講義動画を好きな時間に復習できる(いつでも閲覧可能)
- 不定期で行うオフラインでの勉強会に参加できる(僕自身が東京住みのため、東京・もしくは東京近郊で開催します)
- 自分の住まいの近場のメンティーさん同士で集まって、オフラインで勉強会を開くのも可能(初めて開催する場合は事前に僕に連絡をいただけたらと思います)
ただ、プラン契約者数が35人に達したら15000円に値上げする予定です。
(2019年2月13日現在のプラン契約者数は27人)
値上げする理由は次のとおりです。
- このプランを始めた当初(2018年9月)と比べて、学習コンテンツ(スライド・課題・動画)が充実してきた
- このプランに参加していただいているメンティーさんの中から、「Web未経験から学習を初めて2~3ヵ月くらいで案件獲得までこぎつけることができた」という実績ができた
- 学習サポート(コードレビューや質疑応答など)を1人で行っており、人数が増えすぎるとサポートに支障が出てくるため、値上げという形で参加ハードルをあげた
(人数を制限することによりサポートの質を維持するため)
今後も契約者が増えたり、学習コンテンツがさらに充実していった場合は段階的に料金改定させていただく予定です。
契約した時点の金額がずっと継続される
現在、学習プランを提供しているプラットフォームである「MENTA」の性質上、契約した時点の金額は変わることがありません。
つまり、今後プラン料金が15000円、20000円と上がったとしても、月々の料金は申し込んだときの料金となるので、10000円のときに契約した場合は、受講中はずっと10000円で受講することができます。
詳しく話を聞いてみたい方は
以下のいずれかでメッセージをいただけたらと思います^^
プラン内容については以下のリンク先からも確認することが出来ます^^