【Bootstrap】グリッドシステムを用いたレイアウトの紹介

Bootstrap

今回は、Bootstrapのグリッドシステムを用いたレイアウト方法について紹介します。

カラム

Bootstrapのレイアウトには、ページを12列に分割したグリッドシステムが使われています。

1列をカラムといい、その12列の配分でレイアウトを決めるといったイメージですね。


例:

コンテナ

まずグリッドシステムでレイアウトする際に使用するのがコンテナです。

コンテンツを囲む箱であり、ページの水平中央にコンテンツを配置する役割を持っています。


可変幅コンテナ固定幅コンテナの2種類あり、

画面サイズによってコンテンツの最大幅を切り替えるには固定幅コンテナ(container クラス)
画面サイズ全幅にわたるコンテンツ幅を持たせたいときは可変幅コンテナ(container-fluid クラス)を使います。

<div class="container">container</div>
<div class="container-fluid">container-fluid</div>

コンテナの高さと色はCSSで指定しました。



ブラウザの画面幅を変えると以下のようになります。



固定幅コンテナはブラウザの画面幅に応じて最大幅が変化しているのに対し、可変幅コンテナは常に画面幅いっぱいに伸びているのが確認できました。

グリッドシステムの基本構造

基本構造は、コンテナ>行(row クラス)>カラム(col クラス)となります。


コンテナの中に row クラスを指定した要素で1行をつくり、その中に col クラスを指定したカラムを入れるという形になります。

<div class="container">
    <div class="row">
      <div class="col">1列目</div>
      <div class="col">2列目</div>
      <div class="col">3列目</div>
    </div>
</div>

列のレイアウト

等幅カラム

行内のカラムを等幅にするには、先ほどの例でも示した通り col クラスを使用するのが最も簡単です。

カラムの個数にあわせて自動的に等幅になります。

<div class="container">
    <div class="row">
      <div class="col">1列目</div>
      <div class="col">2列目</div>
    </div>
    <div class="row">
      <div class="col">1列目</div>
      <div class="col">2列目</div>
      <div class="col">3列目</div>
    </div>
    <div class="row">
      <div class="col">1列目</div>
      <div class="col">2列目</div>
      <div class="col">3列目</div>
      <div class="col">4列目</div>
    </div>
 </div>

指定幅カラム

カラムの幅を指定するには、col-X クラスを使用します。(Xには1から12までの数が入ります)

Xの合計が12になるように設定することで、その割合に応じたカラム幅になります。

<div class="container">
    <div class="row">
      <div class="col-2">col-2</div>
      <div class="col-6">col-6</div>
      <div class="col-4">col-4</div>
    </div>
    <div class="row">
      <div class="col-7">col-7</div>
      <div class="col-5">col-5</div>
    </div>
 </div>

1カラムのみ指定

1つのカラム幅のみを指定すると、残りのカラムの幅は自動的に等幅になります。

  <div class="container">
    <div class="row">
      <div class="col">col</div>
      <div class="col-6">col-6</div>
      <div class="col">col</div>
    </div>
    <div class="row">
      <div class="col">col</div>
      <div class="col-4">col-4</div>
      <div class="col">col</div>
      <div class="col">col</div>
      <div class="col">col</div>
    </div>
  </div>



上のサンプルは、つまり下の画像のように置き換わっています。

5段階のレイアウト制御

Bootstrapには、レイアウトを切り替えるための5段階のブレイクポイントが用意されており、container や col などのクラスの後に -sm などを追加することで制御することができます。

 0px以上576px以上768px以上992px以上1200px以上
指定なし100%540px720px960px1140px
○○-sm100%540px720px960px1140px
○○-md100%100%720px960px1140px
○○-lg100%100%100%960px1140px
○○-xl100%100%100%100%1140px



例として、それぞれのクラスをつけたコンテナを見てみましょう。

<div class="container">container</div>
<div class="container-sm">container-sm</div>
<div class="container-md">container-md</div>
<div class="container-lg">container-lg</div>
<div class="container-xl">container-xl</div>
<div class="container-fluid">container-fluid</div>



画面幅に応じた表示の変化を確認してください。




続いて、カラムにブレイクポイントのクラスをつけたものを見てみます。

<div class="container">
  <div class="row">
    <div class="col-md">col-md</div>
    <div class="col-md">col-md</div>
    <div class="col-md">col-md</div>
  </div>
  <div class="row">
    <div class="col-md-7">col-md-7</div>
    <div class="col-md-5">col-md-5</div>
  </div>
</div>



ブレイクポイントによって表示が変化していることが確認できました。

可変幅カラム

col-auto クラスを使用すると、その中身によって幅が変化するようになります。

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col-auto">col-auto(コンテンツに応じて幅が変わります)</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col">col</div>
    <div class="col-md-auto">col-md-auto(768px以上のときコンテンツに応じて幅が変わります)</div>
    <div class="col">col</div>
  </div>
</div>

等幅カラムを複数行に分割

w-100 クラスを挿入することで、等幅カラムを複数行に分割することができます。

これは、幅100%の空の要素を挿入することで分けています。

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>






また、これに d-none クラス(display: none)d-○○-block クラス(display: block)を組み合わせることで、ブレイクポイントごとに分割の仕方を切り替えることができます。

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100 d-none d-md-block"></div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

カラムの整列

行の垂直方向の整列

行自体を垂直方向に整列したい場合は、row クラスを指定した要素に、align-item-{ プロパティ } クラスを追加します。

プロパティには、start(上揃え)、center、(中央揃え)、end(下揃え)が入ります。

<div class="container">
  <div class="row align-items-start">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row align-items-center">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row align-items-end">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

カラムの垂直方向の整列

カラム単位で垂直方向の整列をしたい場合は、col クラスを指定した要素に、align-self-{ プロパティ } クラスを指定します。

先ほどと同様にプロパティには start(上揃え)、center(中央揃え)、end(下揃え)が入ります。

<div class="container">
  <div class="row">
    <div class="col align-self-start">col align-self-start</div>
    <div class="col align-self-center">col align-self-center</div>
    <div class="col align-self-end">col align-self-end</div>
  </div>
</div>

水平方向の整列

カラムの水平方向の整列には、row クラスを指定した要素に、justify-content-{ プロパティ } クラスを追加します。

プロパティには、start(左揃え)、center(中央え)、end(右揃え)、around(等間隔)、between(両端揃え) が入ります。

<div class="container">
  <div class="row justify-content-start">
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
  </div>
  <div class="row justify-content-center">
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
  </div>
  <div class="row justify-content-around">
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
  </div>
</div>

カラムの並べ替え

order-X クラス

order-X クラス(Xには1~12の数が入ります)を使うことで、HTMLの構造を変えずにコンテンツの見た目の順序を変えることができます。

数字が小さい順に並び変わりますが、order-X クラスが指定されていないカラムがあればそれらがまず最初にきます。

<div class="container">
  <div class="row">
    <div class="col">指定なし(HTML上では1番目)</div>
    <div class="col order-2">order-2 (HTML上では2番目)</div>
    <div class="col">指定なし (HTML上では3番目)</div>
    <div class="col order-1">order-1 (HTML上では4番目)</div>
  </div>
</div>




また、order-first クラスを使用することで、{ order: -1 } を適用することになり、簡単に一番前へ持ってくることができます。

<div class="container">
  <div class="row">
    <div class="col order-2">order-2(HTML上では1番目)</div>
    <div class="col order-1">order-1 (HTML上では2番目)</div>
    <div class="col">指定なし (HTML上では3番目)</div>
    <div class="col order-first">order-first (HTML上では4番目)</div>
  </div>
</div>

カラムのオフセット

offset-X クラス(Xには1~12の数が入ります)を使うことで、その数字のカラム分右に移動することができます。
(カラムの左側にマージンを増加させることで右側に移動しており、この移動分をオフセットといいます)

また、特定のブレイクポイントでオフセットをリセットする場合は、offset-0 クラスを追加します。

<div class="container">
  <div class="row">
    <div class="col-sm-5">col-sm-5</div>
    <div class="col-sm-5 offset-sm-2 offset-md-0">col-sm-5 offset-sm-2 offset-md-0</div>
  </div>
</div>

グリッドレイアウトの入れ子

グリッドレイアウトを入れ子にすることで、より複雑なレイアウトが可能になります。

<div class="container">
  <div class="row">
    <div class="col-sm-9">col-sm-9
      <div class="row align-items-center">
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
      </div>
    </div>
    <div class="col-sm-3">col-sm-3</div>
  </div>
</div>






今回は以上になります。

ご覧いただきありがとうございました(^^)
続きはこちら↓

コメント

コンタクトフォーム

    タイトルとURLをコピーしました