コンテナとブレイクポイント

BootstrapにはリセットCSSが同梱されているため、そのまま内容を記述すると、ウェブブラウザーの左側に全体がくっついてしまいます。

そのため、これを CSSで調整しなければならないのですが、Bootstrapではこれを「コンテナ(Container)」というもので全体を囲むのがセオリーとなっています。

Containerを利用しよう

まずは、内容全体を「container」というクラスの要素で囲みます。

<div class="container">
  <h1>ともすた</h1>
  <p>YouTubeもよろしくお願いします</p>
</div>

これで画面を表示すると、左右に余白が生まれるようになります。

なお、必ずしも全部を囲む必要はなく、左右に余白を入れたくない画像やナビなどの要素の場合は、囲む必要はありません。

ここでは、コンテナの幅がわかりやすいように、次のような要素を追加しておきましょう。

<div class="bg-primary">div</div>

次のように、コンテナの幅全体に青いバーが表示されます。

コンテナの利点

コンテナを利用すると、デバイスやウィンドウの大きさに合わせて余白を自動的に調整する機能を持っています。

デバイスの幅を変えていくと、段階的に余白が調整されます。

そして、スマートフォンなどの画面幅になると、余白を無くしてコンテンツを見やすくしてくれます。つまり、レスポンシブ・ウェブデザインに簡単に対応することができるというわけです。

ブレイクポイントとは

コンテナの余白調整されるポイントを「ブレイクポイント」と呼びます。Bootstrapの場合、これが 6箇所設定されていて、デスクトップやタブレット、スマートフォンなど幅広いデバイスの幅に合わせてコンテンツ幅を調整することができます。

また、ブレイクポイントのない「Fluid」レイアウトというのを作ることもできます。上記の図で、全ての幅で 100%となっている通り、段階がなくデバイスの幅に合わせて伸び縮みするコンテンツを作ることができます。Fluidコンテナを使う場合は、「container」クラスの代わりに「container-fluid」クラスを使います。

<div class="container-fluid">

Fluidになるタイミングを調整しよう

Fluidと通常の幅の調整を両立させることもできます。標準では 576pxのところで Fluidに切り替わるのを、もっと広い幅で調整できます。先の表にある、次のようなクラス名を利用していきます。

  • container-sm
  • container-md
  • container-lg
  • container-xl
  • container-xxl

例えば、「container-md」クラスを利用すると 768pxのところで、Fluidレイアウトに変化するようになります。

<div class="container-md">

「container-fluid」は、非常に広い画面幅でも 100%になってしまうため、レイアウトがかなり難しくなってしまいます。そのため、利用する機会はかなり少なく、基本的には大きくても「container-xl」や「container-xxl」などが使いやすいでしょう。

ともすたチャンネルに
チャンネル登録する