グリッドシステムってなんだ？
グリッドシステムを詳しく知りたい…
今回はこんな疑問を解消していきます!
Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
こんにちは、ティロといいます
プログラミング好きな理系大学生です
グリッドシステムを詳しく解説していきます！
その前にBootstrapというcssとjavascriptのフレームワークを使うのでBootstrapをhead内に読み込みます。
Bootstrapってなんぞや？という方はこちらの記事をどうぞ！
Bootstrapってなに？Bootstrapの基本的な使い方が知りたい Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。Bootstrapの機能はほぼ載っています。[…]
Bootstrapをcdnで読み込む
以下のコードをhead内に貼り付けてください。
1 2 3 4 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> |
Bootstrapのグリッドシステムとは？
グリッドシステムとはページの幅を12等分にしたもので、クラスをつけるだけで様々な表現が可能です。
グリッドシステムを使ってみる
グリッドシステムを使ってみましょう
使うクラスは以下の通りです。
| container | コンテナを作ります。箱の役割があります。 |
| row | 規則正しく横並びにします。 |
| col | カラムを指定します。最大12分割することが可能です。 |
class=”col”がついた要素をrowの子要素に書くだけで自動で均等に分割されます。
例をご確認ください。12分割してみました。
コードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="container"> <div class="row"> <div class="col"><p class="text-center">1列</p></div> <div class="col"><p class="text-center">2列</p></div> <div class="col"><p class="text-center">3列</p></div> <div class="col"><p class="text-center">4列</p></div> <div class="col"><p class="text-center">5列</p></div> <div class="col"><p class="text-center">6列</p></div> <div class="col"><p class="text-center">7列</p></div> <div class="col"><p class="text-center">8列</p></div> <div class="col"><p class="text-center">9列</p></div> <div class="col"><p class="text-center">10列</p></div> <div class="col"><p class="text-center">11列</p></div> <div class="col"><p class="text-center">12列</p></div> <div class="col"><p class="text-center">13子m</p></div> </div> </div> |
p要素についているclass=”text-center”は名前の通りテキストは中央に配置します。
<div class=”col”><p class=”text-center”>11列</p></div>を3つにすると以下のように自動で幅が設定されます。
class=”col”の数によって幅が決まることが分かると思います。
グリッドシステムの幅を指定したい
次にグリッドシステムの幅を指定する方法をご紹介します。上の例では均等に幅が設定されていましたが、この幅を任意に決めます。
このように1列と3列が同じ幅で2列目はかなり大きな幅を取っています。
方法は簡単で、col-(0<x<13) 1以上12以下の数字を書くだけです。
1 2 3 4 5 | <div class="row"> <div class="col-2"><p class="text-center">1列</p></div> <div class="col-8"><p class="text-center">2列</p></div> <div class="col-2"><p class="text-center">3列</p></div> </div> |
数字が大きいほど幅は大きくなります。
また数字は足して12になるようにしてください。例ではcol-2,col-8,col-2なので数字を足すと2+8+2=12で12になっています。
仮に12を超えるとどうなるのかご覧ください。
12を超えると下に配置されます。
一部分だけ幅を指定して、後は自動で均等に配置したい場合があります。そんなときは以下のように書きます。
1 2 3 4 5 6 7 | <div class="container"> <div class="row"> <div class="col"><p class="text-center">1列</p></div> <div class="col"><p class="text-center">2列</p></div> <div class="col-6"><p class="text-center">3列</p></div> </div> </div> |
幅を指定したいところだけcol-数字を書き、それ以外はcolと書きます。
グリッドシステムをレスポンシブデザインに対応したい
次にグリッドシステムをレスポンシブデザインに対応させます。
レスポンシブデザインに対応とはスマホやタブレットで見やすくするということです。
レスポンシブデザインに対応するにはcol-数字をcol-md-数字にします。
例を見てましょう
幅を768px以下にすると列が1列になり縦に並びます。
1 2 3 4 5 6 7 | <div class="container"> <div class="row"> <div class="col-md-3"><p class="text-center">1列</p></div> <div class="col-md-3"><p class="text-center">2列</p></div> <div class="col-md-6"><p class="text-center">3列</p></div> </div> </div> |
幅を768pxよりも大きくすると
となります。
例ではブレイクポイントは768pxでしたが、Bootstrapには他にもいくつか用意されています。
ブレイクポイントは以下の表にまとめました。
| sm | 576px以上でスタイルが反映 |
| md | 768px以上でスタイルが反映 |
| lg | 992px以上でスタイルが反映 |
| xl | 1200px以上でスタイルが反映 |
グリッドシステムの応用
グリッドシステムの基本的なことをご紹介しました。
次により自由度が高まる機能をご紹介します。
カラムの配置
以下のクラスを加えることによって配置を変えられます。
| justify-content-center | 中央に配置する |
| justify-content-start | 左にそろえる |
| justify-content-end | 右にそろえる |
| justify-content-around | 等間隔に配置する |
| justify-content-between | 両側から均等に配置する |
コードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div class="container"> <h3 class="text-center">中央揃え</h3> <div class="row justify-content-center"> <div class="col-md-3"><p class="text-center">1列</p></div> <div class="col-md-3"><p class="text-center">2列</p></div> </div> <h3 class="text-center">左揃え</h3> <div class="row justify-content-start"> <div class="col-md-3"><p class="text-center">1列</p></div> <div class="col-md-3"><p class="text-center">2列</p></div> </div> <h3 class="text-center">右揃え</h3> <div class="row justify-content-end"> <div class="col-md-3"><p class="text-center">1列</p></div> <div class="col-md-3"><p class="text-center">2列</p></div> </div> <h3 class="text-center">等間隔</h3> <div class="row justify-content-around"> <div class="col-md-3"><p class="text-center">1列</p></div> <div class="col-md-3"><p class="text-center">2列</p></div> </div> <h3 class="text-center">両側から均等</h3> <div class="row justify-content-between"> <div class="col-md-3"><p class="text-center">1列</p></div> <div class="col-md-3"><p class="text-center">2列</p></div> </div> </div> |
ガターを削除したい
ガターとはカラムの両サイドに15pxずつある余白のことです。これを削除する方法をご紹介します。
| no-gutters | ガターの削除 |
コードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="container"> <h3 class="text-center">ガターの削除</h3> <div class="row no-gutters"> <div class="col"><p class="text-center">1列</p></div> <div class="col"><p class="text-center">2列</p></div> </div> <h3 class="text-center">ガタ―あり</h3> <div class="row"> <div class="col"><p class="text-center">1列</p></div> <div class="col"><p class="text-center">2列</p></div> </div> </div> |
実際にサイトを作りながら勉強したい！という方はこちらがおすすめです．