「増補改訂版Bootstrap4入門」コンテナ【Udemyで学習】
このレクチャーではBootstrap4の「コンテナ」について、説明をします。
箱という意味を持つ「コンテナ」はBootstrap4の最も基本的な要素です。この後のレクチャーで説明する「グリッドシステム」を使用する場合は、最初に「コンテナ」を配置して、その内部に「グリッドシステム」を配置する決まりとなっています。コンテナは表示するページのコンテンツの最も大きな箱として、BODYタグの直下に配置します。
コンテナには、「固定幅コンテナ」と「可変幅コンテナ」の二種類があります。
containerクラスを適用する「固定幅コンテナ」は、基本的に幅のサイズが固定の箱です。基本的にと言ったのは、この後のレクチャーで説明する「ブレイクポイント」で固定の幅のサイズが変化するからです。「幅が何ピクセルからから何ピクセルの場合は何ピクセルで固定されている」というイメージです。
container-fluidクラスを適用する「可変幅コンテナ」は、常にブラウザの幅いっぱいに広がる箱です。画面全体を使ったコンテンツを表示させたい場合に効果的です。
一つずつ説明していきましょう。
まずは「固定幅コンテナ」です。固定幅コンテナはdivタグにcontainerクラスを適用します。幅の変化がわかるように背景色を黄色にするbg-warningクラスも適用しました。ブラウザを見ると、少し左右に余白があるコンテナであることがわかります。ブラウザを広げてみましょう。空白は広がりますが、背景色の部分は固定幅であることがおわかりいただけると思います。もう少し広げてみましょう。ある一定の幅に到達した時に、固定幅の幅が変化しました。この切り替え点がブレイクポイントと言います。この後のレクチャーで詳しく説明します。いがかでしょうか？基本的に固定の意味をご理解いただけたでしょうか？
次に「可変幅コンテナ」を紹介します。可変幅コンテナdivタグにcontainer-fluidクラスを適用してみます。ブラウザを見ると、先ほどの固定幅コンテナとは違って、左右の余白がなくなりました。この後、ブラウザを広げてみます。背景色の部分がブラウザの横幅にあわせ広がることがおわかりいただけると思います。いがかでしょうか？可変幅コンテナと言われる所以がわかると思います。
以上、「コンテナ」の説明を終わります。次のレクチャーでは「グリッドシステム」について、説明をします。
★★★ 続きはUdemyで ★★★
https://www.udemy.com/bootstrap4_for_developer_2
★★★ コース内でお逢いできることを楽しみにしています。 ★★★
