Bootstrapのグリッドシステム
Bootstrap側がメディアクエリを用意
HTMLタグにクラスをつけるだけでレスポンシブデザイン化
使うためには決まった書き方がある
今回は初歩の初歩ということで、下記のGIFのような構造を作りました。それを解説します。
環境
macOS Catalina 10.15.6
Bootstrap 4.3.1
Rails 6.0.3.4
今回のコード
先に、今回実装したコードを示します。見慣れないと難しいですが、１つずつ解説していきますので安心してください。
# index.html.erb
<!-- 必要部分のみを抜粋 --><divclass="container"><h2><576pxで縦並び</h2><h2>≧ 576px で幅半分</h2><divclass="row"><divclass="col-sm-6">col-sm-6</div><divclass="col-sm-6">col-sm-6</div></div><h2><768pxで縦並び</h2><h2>≧ 768px で幅比1:3:2</h2><divclass="row"><divclass="col-md-2">col-sm-2</div><divclass="col-md-6">col-sm-6</div><divclass="col-md-4">col-sm-4</div></div></div>書き方の基本
1. テーブルを意識した入れ子構造
グリッドシステムは「横幅の大きさに依存して変化するテーブル」の構造をとっています。
基本的にはHTMLを用いてこのように表現します。
<divclass="container"> # テーブルの外枠
<divclass="row"> # テーブルの行
<divclass="col"> # テーブルの列
</div></div></div>container > row > col の入れ子構造です。
もし行を増やしたい場合は…
<divclass="container"> # テーブルの外枠
<divclass="row"> # テーブルの行 : 1
<divclass="col"> # テーブルの列 : 1-1
</div></div><divclass="row"> # テーブルの行 : 2
<divclass="col"> # テーブルの列 : 2-1
</div></div></div>列を増やしたい場合は…
<divclass="container"> # テーブルの外枠
<divclass="row"> # テーブルの行 : 1
<divclass="col"> # テーブルの列 : 1-1
</div><divclass="col"> # テーブルの列 : 1-2
</div><divclass="col"> # テーブルの列 : 1-3
</div></div><divclass="row"> # テーブルの行 : 2
<divclass="col"> # テーブルの列 : 2-1
</div><divclass="col"> # テーブルの列 : 2-2
</div></div></div>このように書きます。
2. 列をレスポンシブ対応
さて、ここからレスポンシブ化していきます。といってもやることは簡単です。
今回は「ある横幅までは横並び。そこを越えて小さくなると縦並び」を表現します。
この場合の基本構文はこちらのとおりです。
"col-[横幅の条件]-(12分のいくつ)"
1つずつ見ていきましょう。
横幅の条件
これはブレークポイントに相当します。
Bootstrapの公式サイトには次のようにまとめられています。
- sm : 576px, smartphone
- md : 768px, medium
- lg : 992px, large
- xl : 1200px, Extra Large
よって、例えばcol-smを付与すると「576px未満で縦並び」という意味になります。
12分のいくつ
次に各要素の横幅の設定です。
これは以下のルールで決まります。
- rowの横幅を12とする
- 12に対する割合をcolに指定する
よって、例えばcol-sm-6を付与すると「576px未満で縦並び。576px以上では親要素の半分の幅」という意味になります。
以上がグリッドシステムの基本です。
これを踏まえて最初のコードを見てみましょう。
最初のコードを紐解く
今回はこのようなコードを書きました。
# index.html.erb
<!-- 必要部分のみを抜粋 --><divclass="container"><h2><576pxで縦並び</h2><h2>≧ 576px で幅半分</h2><divclass="row"><divclass="col-sm-6">col-sm-6</div><divclass="col-sm-6">col-sm-6</div></div><h2><768pxで縦並び</h2><h2>≧ 768px で幅比1:3:2</h2><divclass="row"><divclass="col-md-2">col-sm-2</div><divclass="col-md-6">col-sm-6</div><divclass="col-md-4">col-sm-4</div></div></div>h2要素に各div要素の意味を記載しましたが、その意味がわかったことと思います。
このコーディングにより下記のようなデザインが完成しました。
まとめ
Bootstrapが用意したメディアクエリを用いることでレスポンシブ対応が可能となる
列要素にsmを付与すると横幅576px前後でレイアウトが変化する
row要素の幅を12としてブレークポイントまでの列要素の横幅を決定する
正直むずかしそうと敬遠していたグリッドシステムですが、基本はものすごくシンプルでした。
さっそくオリジナルアプリに組み込んでみます！
おまけ
本文ではコードの一部を省きました。こちらでは生のコードを添付します。ご参考まで(下で少し解説しています)。
<divclass="container"style="height: calc(100vh - 56px - 56px); background-color: lightskyblue;"><h2><576pxで縦並び</h2><h2>≧ 576px で幅半分</h2><divclass="row pb-5"><divclass="col-sm-6 btn btn-danger">col-sm-6</div><divclass="col-sm-6 btn btn-secondary">col-sm-6</div></div><h2><768pxで縦並び</h2><h2>≧ 768px で幅比1:3:2</h2><divclass="row pb-5"><divclass="col-md-2 btn btn-danger">col-sm-2</div><divclass="col-md-6 btn btn-secondary">col-sm-6</div><divclass="col-md-4 btn btn-primary">col-sm-4</div></div></div>【padding】
- pb-○ : padding-bottom
【ボタン】
- btn : ボタン化
- btn-primary : 青ベースのボタン化
- btn-secondary : 灰色ベースのボタン化
- btn-danger : 赤ベースのボタン化