トモジグリッドシステムって何？
詳しく知りたい・・
本記事は、
上記のような方に向けて記事を書いています。
こんにちは、トモジです。
私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。
本記事は、グリッドシステムに関して要点を
わかりやすく説明しております。
1.Bootstrapのグリッドシステムとは?
グリッドシステムとは、Bootstrapの
ページレイアウトを自在にコントロールするための
強力な仕組みになります。
グリッドシステムの考え方
グリッドシステムは、カラムというエリアを
縦に12分割して管理をします。
また、レスポンシブ(デバイスのサイズに対応)な
変化をさせることが可能です。
グリッドシステムの使い方
グリッドシステムは、div要素にrowクラスを作り、その中にcolクラスを記述します。
グリッドシステムに関して
<body>
<div class="row">
<div class="col green">A</div>
<div class="col yellow">B</div>
<div class="col red">C</div>
</div>
</body>.green{
background-color: green;
height: 50px;
}
.yellow{
background-color:yellow;
height: 50px;
}
.red{
background-color: red;
height: 50px;
}
グリッドシステム(カラム幅を変更)
カラム幅の変更は非常に簡単で、col-カラム数のクラスと記述します。
グリッドシステム(カラム幅を変更)に関して
<body>
<div class="row">
<div class="col-3 green">A</div>
<div class="col-4 yellow">B</div>
<div class="col-5 red">C</div>
</div>
</body>.green{
background-color: green;
height: 50px;
}
.yellow{
background-color:yellow;
height: 50px;
}
.red{
background-color: red;
height: 50px;
}
グリッドシステム
(合計が12カラムではない場合)
グリッドシステムが合計12カラムではない場合に
どの様な変化が起きるのか見ていきましょう。
合計が12カラムより少ない場合
合計カラムが12より少ない場合は、
左詰めでカラム数分の表示になります。
合計が12カラムより少ない
<body>
<div class="row">
<div class="col-3 green">A</div>
<div class="col-4 yellow">B</div>
</div>
</body>.green{
background-color: green;
height: 50px;
}
.yellow{
background-color:yellow;
height: 50px;
}
合計が12カラムより多い場合
合計カラムが12より多い場合は、
12を超えるカラムから改行されます。
合計が12カラムより多い
<body>
<div class="row">
<div class="col-3 green">A</div>
<div class="col-4 yellow">B</div>
<div class="col-6 red">C</div>
</div>
</body>.green{
background-color: green;
height: 50px;
}
.yellow{
background-color:yellow;
height: 50px;
}
.red{
background-color: red;
height: 50px;
}
グリッドシステムのネスト(入れ子)
グリッドシステムは、ネスト構造で
記述することも可能ですが注意が必要です。
内部のグリッドシステムは、
外部で指定した幅を12分割をして
グリッドシステムを構築します。
グリッドシステムのネスト
<body>
<div class="row">
<div class="col-9" style="border:solid 1px #000;">
<div class="row">
<div class="col-12 green">A1</div>
</div>
<div class="row">
<div class="col-6 green">B1</div>
<div class="col-3 yellow">B2</div>
<div class="col-3 red">B3</div>
</div>
<div class="row">
<div class="col green">C1</div>
<div class="col yellow">C2</div>
<div class="col red">C3</div>
</div>
</div>
<div class="col-3" style="border:solid 1px #000;">
<p>サイド</p>
</div>
</div>
</body>.green{
background-color: green;
height: 50px;
border:solid 1px #000
}
.yellow{
background-color:yellow;
height: 50px;
border:solid 1px #000
}
.red{
background-color: red;
height: 50px;
border:solid 1px #000
}
サイド
レスポンシブ
レスポンシブとは、
ブレイクポイントを記述することでデバイスでの
表示設定を切り替えることができます。
以下の図がブレイクポイントになり、
横幅のサイズを変更する際に設定が対応されます。
記述方法
レスポンシブに関して
<body>
<div class="row">
<div class="col-12 col-md-6 green">A</div>
<div class="col-6 col-md-3 yellow">B</div>
<div class="col-6 col-md-3 red">C</div>
</div>
</body>.green{
background-color: green;
height: 50px;
}
.yellow{
background-color:yellow;
height: 50px;
}
.red{
background-color: red;
height: 50px;
}※横幅を変更すると切り替わります
2.コンテナの設定
グリッドシステムを使用する際に、containerやcontainer-fluidを
クラスで囲む決まりになっており
左右に余白を設けてページ中央に配置する
設定になります。
container
containerクラスは、
左右に15pxの余白と中央寄せが設定されます。
containerに関して
<body>
<p>containerなし</p>
<div class="container">
<p>containerあり</p>
</div>
</body>p{
background-color: #B0DDE0;
font-size:10px;
}containerなし
containerあり
container-fluid
流動的コンテナを意味するcontainer-fluidは、画面いっぱい(width: 100%)に広がる設定になります。
container-fluidに関して
<body>
<p>container</p>
<div class="container-fluid">
<p>container-fluidあり</p>
</div>
</body>p{
background-color: #B0DDE0;
font-size:10px;
}container
container-fluidあり
containerとrowの余白の関係
containerとrowを使用すると
以下の理由で余白は0になります。
container
左右に15pxの余白が設けられるrow
領域を左右に15px広げられる
containerとcontainer-fluidの違い
containerとcontainer-fluidの大きな違いは、
画面サイズ(横幅)を変更する際に違いが出てきますので見ていきましょう。
container
containerは、
ブレイクポイントで段階的に横幅が変化します。
container-fluid
container-fluidは、
画面サイズに応じて幅に変化が起きます。
まとめ
最後にこの記事のポイントをまとめておきます。
グリッドシステム
カラム数
エリアを縦に12分割して管理記述方法
div要素にrowクラスを作り、
その中にcolクラスを記述カラム幅の変更
カラム数で管理合計カラム12以下
左詰めでカラム数分の表示合計カラム12以上
12を超えるカラムから改行して表示ネスト構造
外部カラムを12分割して表示ブレイクポイント
デバイスでの表示設定を切り替えて表示
コンテナの設定
container
左右に15pxの余白と中央寄せcontainer-fluid
画面いっぱい(width: 100%)に広がるrow
領域を左右に15px広げるcontainer
ブレイクポイントで段階的に横幅が変化container-fluid
画面サイズに応じて幅に変化
