【Bootstrapのレイアウトの基本】コンテナについて

記事内に商品プロモーションを含む場合があります

Bootstrapで、レイアウトを作っていく基本の考え方についてお伝えします。

レイアウトとは、全体をくるむ箱のようなもので、HTMLを学習している方はよく把握されていると思いますが、横幅を指定して、その中にwebサイトのコンテンツを入れ込んでいきます。

この箱がないとまとまりのないwebサイトになってしまい、ユーザーに分かりやすくまとめていくためにも、このレイアウトの考え方は必須知識となります。

Bootstrapのレイアウトには大きく分けて2種類のものがあります。

1. 固定幅
2. 可変幅

これらを学習して、使い分けていく必要があります。

なお、このレイアウトの思想は、レスポンシブサイトの制作にも関わってくる重要な箇所になりますので、しっかりと押さえておきましょう。

固定幅のレイアウトについて

固定幅はその名の通り、横幅が固定されたレイアウト構成になります。

固定幅を指定するBootstrapのクラス名としては、以下を使用します。

container

https://getbootstrap.com/docs/4.4/layout/overview/#containersより

bodyタグ直下に、divタグを作り、containerクラスを付与しましょう。

固定幅レイアウトの横幅は、基本は固定されていますが、ある一定のピクセル数になると固定幅ではあるのですが、切り替わります。

この切り替わるポイントをブレイクポイントと呼びますが、ブレイクポイントに応じて切り替わりはしますが、これは固定幅のレイアウトです。

※ブレイクポイントについては、別記事を用意していますのでこちらをご覧ください。

可変幅のレイアウトについて

可変幅は、使用端末に応じて、横幅が可変するレイアウト構成です。

可変幅のものを使用するクラス名は、次の通り。

container-fluid

https://getbootstrap.com/docs/4.4/layout/overview/#containersより

同じようにbody直下にdivタグを作り、container-fluidのクラスを付与します。

するとちょっと分かりづらいかもしれませんが、先ほどとは異なり、横幅目一杯のレイアウトになっていることが分かります。

これは、ブラウザを小さくしても、そのまま適用されており、横幅100%になっていることが分かります。

以上が可変幅のレイアウトの基礎になります。

まとめ

Bootstrapのレイアウトの基本であるコンテナには2種類ものがありました。

1. 固定幅
2. 可変幅

制作物に応じて、これらを使い分け、見栄えの効いたwebサイトを作り上げていってください。