Bootstrap4を使ったレスポンシブレイアウトの使い方を解説。
Bootstrap4のようなCSSフレームワークに搭載されているレイアウトクラス。正しく使えるようになれば簡単にレスポンシブデザインができるようになるので超重要なポイント。
ここではBootstrap4のレイアウトグリッドとレスポンシブの作り方をまとめて紹介します。
レスポンシブって何？
レスポンシブは日本語で「応答性のある」という意味。つまりパソコンやスマホなどの画面サイズに応じてレイアウトが変わるということです。
Webサイトでこれを実装するには、メディアクエリを多用する必要があるため自前で作ると次の例のようにかなりめんどくさい作業になります。
/* スマホ */
[class*="col-"] {
width: 100%;
}
/* タブレット */
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}こういっためんどくさい作業をあらかじめ実装してくれているのがBootstrap4というわけです。
Bootstrap4使うと超便利な理由
Bootstrap4には上のコードのようなものがすでに実装されているので、ホームページを作るたびに作り直したりしなくてよくなります。
また、パソコンでの表示は４列、スマートフォンは２列で表示するといった使い分けができたり、Bootstrap4で新しく加わったFlexユーティリティを使えば縦横の均等揃えなども簡単にできます。
要はBootstrapを使うことで思い通りのレイアウトをClassの付け替えだけで簡単に作れるってことですね。
Bootstrap4のグリッドレイアウトの作り方
Bootstrap4のGridレイアウトはこちらの公式ページで解説されているのでチェックしておきましょう。
グリッドレイアウトの基本構造
グリッドレイアウトの基本構造は次のようになります。
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>グリッドレイアウトで覚えるのは次の３つだけです。
container: 画面幅（ブレークポイント）に合わせてコンテンツを中央に配置row: グリッドの行のこと、グリッドを作るときはこれでまとめるcol: グリッドのカラム（列）、最大１２列まで入れることができる
containerを使わない場合、ブラウザの横幅いっぱいに広がるようになります。幅を制限して中央に寄せたい場合はcontainerを使うと便利。
グリッドの幅を指定する
基本的には上の３つで作れるのですが、colだけだと自動的に当分割されてしまうので、例えばメインエリアを広く、サイドエリアを狭くといったことができません。
グリッドの幅を指定するにはcolのあとに-9のように数字を付ければOK。数字は１列あたり最大１２までになってます。
<!-- 合計12なので1行で表示される -->
<div class="row">
<div class="col-9">col-9</div>
<div class="col-3">col-3</div>
</div>
<!-- 12を超えると自動的に改行される -->
<div class="row">
<div class="col-9">col-9</div>
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
</div>グリッドをレスポンシブ化する
ここまででもエリアごとの幅を指定することができますが、このままだとPCでもスマホでも同じ割合で表示されるため、スマホでぴったりだとPC画面で広すぎたり、PC画面で最適化するとスマホ画面で狭くなりすぎたりします。
グリッドをレスポンシブ化するには、col-9の間に画面サイズを指定する文字を入れるだけです。サイズは次の５つがあり、指定した画面サイズごとに自動的に切り替えられます。
col-: スマホ〜col-sm-: タブレット〜col-md-: 大きめタブレット〜col-lg-: PC〜col-xl-: 大きいPC〜
<!-- スマホで12カラム、タブレットで6カラム、PCから8カラムと4カラム -->
<div class="row">
<div class="col-12 col-sm-6 col-lg-8">col-12 col-sm-6 col-lg-8</div>
<div class="col-12 col-sm-6 col-lg-4">col-12 col-sm-6 col-lg-4</div>
</div>Bootstrap4のグリッドレイアウト応用編
Bootstrap4のグリッドレイアウトはカラムを作るだけではなく、整列や順序の入れ替えなど応用的な使い方ができます。
グリッドの整列
グリッドは上下左右に揃えたり、均等に配置したりできます。
<!-- 左右に揃える -->
<div class="row justify-content-start">左揃え</div>
<div class="row justify-content-end">右揃え</div>
<div class="row justify-content-center">中央揃え</div>
<div class="row justify-content-around">中央に均等揃え</div>
<div class="row justify-content-between">両端に均等揃え</div>
<!-- 上下に揃える -->
<div class="row align-items-start">上揃え</div>
<div class="row align-items-end">下揃え</div>
<div class="row align-items-center">中央揃え</div>グリッドの整列ではカラムのときと同じように、lgのような画面サイズ指定を挟むことでレスポンシブに対応することができます。
<!-- 挟む位置は最後のテキストの前 -->
<div class="row justify-content-lg-start">PCサイズ以上で左揃え</div>
<div class="row align-items-md-start">タブレットサイズ以上で上揃え</div>グリッドの順序指定（order）
基本的には上から順に表示されますが、順序を変更することもできます。順番は1から12まで指定できます。
これを使ってサイドバーの左右を入れ替えたりすることも可能。整列と同様、order-の後に画面サイズの指定を入れることでレスポンシブに対応することもできます。
<div class="container">
<div class="row">
<div class="col-lg-9 order-lg-2">
メインエリアを右に表示（スマホではサイドバーの上）
</div>
<div class="col-lg-3 order-lg-1">
サイドバーを左に表示（スマホではメインエリアの下）
</div>
</div>
</div>まとめ
Bootstrap4には便利なグリッドレイアウト用のClassが揃っており、さらにレスポンシブ化する場合もlgやmdをつけるだけなので簡単です。
デザインの段階からBootstrapのグリッドを意識して作っておくとコーディングがすごく楽になるのでオススメ。