Bootstrapでcontainerを利用する方法とは
簡単にお洒落な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を使ったサンプルソースです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap-theme.min.css"> <title>Sample</title> <!--分かりやすいように背景色を追加--> <style type="text/css"> h1 { background-color: gray; } </style> </head> <body> <div class="container"> <h1>.container</h1> </div> <div class="container-fluid"> <h1>.container-fluid</h1> </div> </body> </html> |
では、これをWebページ上で見てみましょう。
上がconainer、下がcontainer-fluidです。ご覧のとおり、containerは画面幅に合わせて余白を持つのに対し、container-fluidは画面100%になっていることが分かるかと思います。
- PG
- コンテンツに合わせてcontainerとcontaier-fluidを使い分けることができるんですね。
- PM
- これと一緒にブレイクポイントを理解しておくと、レスポンシブ対応も簡単にできますよ。
containerとcontainer-fluidを使いこなして素敵なWebサイトにしよう
この記事では、Bootstrapのcontainerの利用方法をお伝えしましたが、いかがでしたでしょうか。画面100%にしたいコンテンツなのか余白を持たせたいコンテンツなのか、使い分けることでより素敵なWebサイトに仕上がります。特にレスポンシブ対応を検討している方はぜひ利用してみてください。
