Bootstrapの基本的な使い方 レイアウト編

この記事では、Bootstrapでページのレイアウトを制御する方法について紹介します。

See the Pen
Untitled by Imai (@imai1)
on CodePen.

Bootstrapのコンポーネントについて知りたい方は、次の記事もご覧いただけたら嬉しいです。また、Bootstrapを触ったことがないという方もまずは次の記事を先に読んでいただくのが良いかと思います。

imai1.hatenablog.com

margin, padding

m-2 p-3などのクラスを付与することで、そのタグのmarginおよびpaddingを制御できます。

<h4 class="h4 border">m無し</h4>
<h4 class="h4 border m-1">m-1</h4>
<h4 class="h4 border m-2">m-2</h4>
<h4 class="h4 border m-5">m-5</h4>

<h4 class="h4 border">p無し</h4>
<h4 class="h4 border p-1">p-1</h4>
<h4 class="h4 border p-2">p-2</h4>
<h4 class="h4 border p-5">p-5</h4>

marginおよびpaddingのクラスは、{m or p}{sides}-{size}という形式になっています。

sidesは上下左右どの方向の設定を付与するかを指定します。

• 無し：全方向
• t：上
• b：下
• s：左
• e：右
• x：左右
• y：上下

sizeは0〜5またはautoです。 $spacerはビルド前にBootstrapをカスタマイズするためのSASSの変数です。

• 0：$spacer * 0
• 1：$spacer * 0.25
• 2：$spacer * 0.5
• 3：$spacer * 1
• 4：$spacer * 1.5
• 5：$spacer * 3
• auto：cssのauto

container

containerクラスは、中に要素を入れる箱のクラスです。スクリーンのサイズに合わせて幅（max-width）を自動で調整してくれます。

まず大きく分けて、containerとcontainer-fluidの二つのクラスがあります。

<div class="container bg-dark text-white mb-2">container</div>

<div class="container-fluid bg-dark text-white">container-fluid</div>

二つのクラスの何が異なるかは、まず冒頭のCodePenの「container」のセクションを表示して見ていただくのが良いかと思います。次の図のように、containerの左右は余白があるのに対して、container-fluidは横幅目一杯になっているのではないでしょうか。

ただし、実際の見え方は描画領域の横幅に依存しますので、そうなっていないという場合は、ブラウザの横幅を変更したり、CodePenの右下の「0.5×」ボタンを押したりしてみてください。

containerはスクリーンのサイズに合わせて多段階的に幅を変化させるクラスです。一方、container-fluidの幅は常に100%です。また厳密には、この二つの他にcontainer-smなど、多段階的に変化する幅の値が異なる五つのクラスがあります。

class↓/スクリーン→	<576px	≥576px	≥768px	≥992px	≥1200px	≥1400px
container	100%	540px	720px	960px	1140px	1320px
container-sm	100%	540px	720px	960px	1140px	1320px
container-md	100%	100%	720px	960px	1140px	1320px
container-lg	100%	100%	100%	960px	1140px	1320px
container-xl	100%	100%	100%	100%	1140px	1320px
container-xxl	100%	100%	100%	100%	100%	1320px
container-fluid	100%	100%	100%	100%	100%	100%

スクリーンサイズとmax-widthの対応について、言葉で説明されてもよくわからないという方は、同じく記事の冒頭のCodePenでブラウザのウィンドウ幅を変化させてみてください。スクリーンの横幅いっぱいまで表示されるクラスと、固定の横幅のクラスが、スクリーンのサイズによって異なる様子が確認できるはずです。

グリッド

列方向に要素を並べる一行のグリッドを作りたい場合は、rowクラスを使用します。行の中の列要素にはcol(-y)-xクラスを使用します。

<div class="row">
  <div class="col-sm-6 border">
    col-sm-6
  </div>
  <div class="col-sm-3 border">
    col-sm-3
  </div>
  <div class="col-sm-2 border">
    col-sm-2
  </div>
  <div class="col-sm-1 border">
    col-sm-1
  </div>
</div>

rowの横方向の領域は仮想的に12等分されています。col(-y)-xクラス（xは1〜12）は左詰めでx/12分の横幅の領域になります。上のコードは次のような結果になるはずです。

全ての要素でcol(-y)-xの-xを省略すると、12を要素数で割った等幅になります。

-yは-sm -md -lg -xl -xxlのいずれかか、または-y部分を取り除いたcol-3クラスなどもあります。簡潔に言うと、スクリーンの横幅を変化させたときに縦置きになる閾値が異なります。冒頭のCodePenで、containerと同様に描画領域の横幅を変化させて、それぞれのが縦置きになる幅が異なることを確認してみてください。

グリッドについて更に細かな制御を実現する方法に興味のある方には以下のページが参考になるのではないかと思います。

getbootstrap.jp
qiita.com

参考文献

getbootstrap.jp
www.w3schools.com