簡単にお洒落なWebサイトを作成できるBootstrap。ルールさえ覚えれば初心者でも簡単に作成できてしまうため、重宝している方も数多くいます。ここでは、Bootstrapの中でも重要な「container」と「container-fluid」について分かりやすく解説していきたいと思います。Webサイトの作成を検討している方は、ぜひ参考にしてみてください。

PG

名前から予想しますが、containerってことは何かを包括するのでしょうか？

PM

その通り。すごく簡潔にいうとWebサイトの大枠のことですよ。

Bootstrapのcontainerとは

Bootstrapのcontainerとは、一言でまとめるとコンテンツやグリッドシステムを収容する要素のことです。コンテンツはWebサイトに載せたい文章や写真。では、グリッドシステムとは何なのでしょうか。

グリッドシステムでは横幅が12等分されているため、下記のように「8:4」や「4:4:4」など、カラム数を指定するだけで簡単にコンテンツを配置することができるのです。

そして、これらを包括する枠がcontainerです。
以下のようなイメージです。

この図のピンク色の部分がcontainerに当たります。グリッドシステムやコンテンツを包括しています。つまり、Bootstrapを利用する上でなくてはならない要素なのです。

では次に、containerと同列で扱われるcontainer-fluidについてもご紹介していきます。

Bootstrapのcontainer-fluidとは

containerと何が違うの？と感じる方もいると思うので、先に使用例を見ていきましょう。以下は、それぞれcontainerとcontainer-fluidを使ったサンプルソースです。

では、これをWebページ上で見てみましょう。

上がconainer、下がcontainer-fluidです。ご覧のとおり、containerは画面幅に合わせて余白を持つのに対し、container-fluidは画面100%になっていることが分かるかと思います。

PG

コンテンツに合わせてcontainerとcontaier-fluidを使い分けることができるんですね。

PM

これと一緒にブレイクポイントを理解しておくと、レスポンシブ対応も簡単にできますよ。

containerとcontainer-fluidを使いこなして素敵なWebサイトにしよう

この記事では、Bootstrapのcontainerの利用方法をお伝えしましたが、いかがでしたでしょうか。画面100%にしたいコンテンツなのか余白を持たせたいコンテンツなのか、使い分けることでより素敵なWebサイトに仕上がります。特にレスポンシブ対応を検討している方はぜひ利用してみてください。