.net column

.NET開発者のためのブログメディア
Webの開発ツール

Bootstrapでcontainerを利用する方法とは

2019年12月17日

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

PG
名前から予想しますが、containerってことは何かを包括するのでしょうか?
PM
その通り。すごく簡潔にいうとWebサイトの大枠のことですよ。

Bootstrapのcontainerとは

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

<グリッドシステムとは>
レイアウトを行う際、画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置し、無駄なくスッキリした画面を作る手法。

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

グリッドシステム

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

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サイトに仕上がります。特にレスポンシブ対応を検討している方はぜひ利用してみてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)