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を使うことで、画面サイズに応じて表示要素の位置を良い感じに整理してくれます。...
【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

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

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

プラン内容は?

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

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

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

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