【Bootstrap 詳細】グリッドシステムを詳しく解説します

グリッドシステムを詳しく解説します

グリッドシステムってなんだ?

グリッドシステムを詳しく知りたい…

 

今回はこんな疑問を解消していきます!

 

ティロ

こんにちは、ティロといいます

プログラミング好きな理系大学生です

 

グリッドシステムを詳しく解説していきます!

その前にBootstrapというcssとjavascriptのフレームワークを使うのでBootstrapをhead内に読み込みます。

Bootstrapってなんぞや?という方はこちらの記事をどうぞ!

関連記事

Bootstrapってなに?Bootstrapの基本的な使い方が知りたい ティロこんにちは、ティロといいます Bootstrapを使うと何が良いのか、また基本的な使い方[…]

bootstrapの導入から使い方



Bootstrapをcdnで読み込む

以下のコードをhead内に貼り付けてください。

 

 

Bootstrapのグリッドシステムとは?

グリッドシステムとはページの幅を12等分にしたもので、クラスをつけるだけで様々な表現が可能です。

 

グリッドシステムを使ってみる

グリッドシステムを使ってみましょう

使うクラスは以下の通りです。

containerコンテナを作ります。箱の役割があります。
row規則正しく横並びにします。
colカラムを指定します。最大12分割することが可能です。

class=”col”がついた要素をrowの子要素に書くだけで自動で均等に分割されます。

例をご確認ください。12分割してみました。

グリッドシステム12列

コードはこんな感じです。

p要素についているclass=”text-center”は名前の通りテキストは中央に配置します。

<div class=”col”><p class=”text-center”>11列</p></div>を3つにすると以下のように自動で幅が設定されます。

グリッドシステム3分割

class=”col”の数によって幅が決まることが分かると思います。

 

グリッドシステムの幅を指定したい

次にグリッドシステムの幅を指定する方法をご紹介します。上の例では均等に幅が設定されていましたが、この幅を任意に決めます。

グリッドシステム不均等

このように1列と3列が同じ幅で2列目はかなり大きな幅を取っています。

方法は簡単で、col-(0<x<13) 1以上12以下の数字を書くだけです。

数字が大きいほど幅は大きくなります。

また数字は足して12になるようにしてください。例ではcol-2,col-8,col-2なので数字を足すと2+8+2=12で12になっています。

仮に12を超えるとどうなるのかご覧ください。

グリッドシステム12を超えた場合

12を超えると下に配置されます。

一部分だけ幅を指定して、後は自動で均等に配置したい場合があります。そんなときは以下のように書きます。

 

グリッドシステム均等と不均等

幅を指定したいところだけcol-数字を書き、それ以外はcolと書きます。

 

グリッドシステムをレスポンシブデザインに対応したい

次にグリッドシステムをレスポンシブデザインに対応させます。

レスポンシブデザインに対応とはスマホやタブレットで見やすくするということです。

レスポンシブデザインに対応するにはcol-数字をcol-md-数字にします。

例を見てましょう

幅を768px以下にすると列が1列になり縦に並びます。

グリッドシステムレスポンシブデザイン

 

 

幅を768pxよりも大きくすると

グリッドシステム均等と不均等

となります。

例ではブレイクポイントは768pxでしたが、Bootstrapには他にもいくつか用意されています。

ブレイクポイントは以下の表にまとめました。

sm576px以上でスタイルが反映
md768px以上でスタイルが反映
lg992px以上でスタイルが反映
xl1200px以上でスタイルが反映

 

グリッドシステムの応用

グリッドシステムの基本的なことをご紹介しました。

次により自由度が高まる機能をご紹介します。

カラムの配置

以下のクラスを加えることによって配置を変えられます。

justify-content-center中央に配置する
justify-content-start左にそろえる
justify-content-end右にそろえる
justify-content-around等間隔に配置する
justify-content-between両側から均等に配置する

 

カラムの整列

コードはこんな感じです。

 

ガターを削除したい

ガターとはカラムの両サイドに15pxずつある余白のことです。これを削除する方法をご紹介します。

no-guttersガターの削除

ガターの削除

コードはこんな感じです。

 

いかがでしたでしょうか?

Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。

また実際にサイトを作りながら勉強したい!という方はこちらがおすすめです.