目指せ!Bootstrapでテンプレート作成
Bootstrapの復習も兼ねて、最終的に今後も使いまわせるテンプレートを作りたいと思い、せっかくならその工程を記録することにしました。
そのため、最初は基本的な内容になると思いますが一緒に復習がてらご確認いただけると嬉しいです!
モバイルファーストのコンセプトに基づいて設計されているので、画面サイズの小さいものからブレイクポイントによってスタイルを上書きしていく仕組みです。
デバイスごとにカラム数を切り替えるレスポンシブなクラスがあり、その切り替えのためのブレイクポイントが5つあります。
5段階のレイアウト制御
カラムにcol-md-△のようなクラスを追加します。
※◯には1〜12の数字が入ります。
col-△ (Extra small < 576px)
画面幅が0以上576px未満、container最大幅なし(自動)
col-sm-△ (Small ≧ 576px)
576px以上768px未満、container最大幅540px
col-md-△ (Medium ≧ 768px)
768px以上992px未満、container最大幅720px
col-lg-△ (Large ≧ 992px)
992px以上1200px未満、container最大幅960px
col-xl-△ (Extra large ≧ 1200px)
1200px以上、container最大幅1140px
ブレイクポイントによる切り替え
col-smクラスを指定して、Small(576px)より小さなデバイスでは縦に積み重なり、Small以上になると水平に並ぶ
<div class="container">
<div class="row">
<div class="col-sm-8">class="col-sm-8"</div>
<div class="col-sm-4">class="col-sm-4"</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">class="col-sm"</div>
<div class="col-sm">class="col-sm"</div>
<div class="col-sm">class="col-sm"</div>
</div>
</div>
可変幅カラム
col-autoクラスを使用したカラムは、コンテンツによって幅を変化させることが可能です。
col-md-autoクラスを指定すると、通常(Medium未満)は幅が100%、Medium以上で可変幅になります。
<div class="container">
<div class="row">
<div class="col">
等幅表示
</div>
<div class="col-auto">
コンテンツによって幅が可変し、残りのcolを指定した要素は等幅で表示される。
</div>
<div class="col">
等幅表示
</div>
</div>
<hr>
<div class="row">
<div class="col">
text text text text
</div>
<div class="col-md-auto">
通常<span class="red">Medium(768px)</span>未満は幅が100%、<span class="red">Medium以上</span>で可変する。
</div>
<div class="col">
text text text text
</div>
</div>
</div>
等幅カラムを複数行に分割
複数の等幅カラムに改行をして複数行に分割する場合、改行する箇所にSizingユーティリティのw-100クラスを挿入します。これは、幅100%を指定するクラスで、後に続く要素は2行目に表示されます。
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="w-100">
</div>
<div class="w-75">
親要素を基準に、75%幅で表示される。
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
行の分割をブレイクポイントで切り替え
Displayユーティリティを使用すると、ブレイクポイントごとに分割の仕方を切り替えることも可能です。
非表示のd-noneクラスと、Medium以上で表示するd-md-blockクラス(medium以上は、display:block)を組み合わせると、Medium以上の画面幅では表示され、それ未満は非表示となります。
<div class="container">
<div class="row">
<div class="col">
<span class="red">
Sizingユーティリティは、ブレイクポイントで行分割を変化させる場合に便利。
</span>
</div>
<div class="col">
ブレイクポイントごとに分割仕様を変える場合は、Displayユーティリティを使用する方法もある。
</div>
<div class="w-100 d-none d-md-block">
Medium以上では(display:block)、未満では(display:none) <span class="red">==ここで改行される==</span>
</div>
<div class="col">
後に続く要素は2行目に表示される
</div>
<div class="col">
表示しないクラス d-noneクラス(display:none)と、Medium以上で表示する d-md-blockクラス(medium以上は、display:block)の組み合わせ。
</div>
</div>
</div>
複数クラスの組み合わせ
カラム数を切り替える方法として、基本のcolクラスや、ブレイクポイントの接頭辞の着いたcol-mdやcol-lgクラスなどが用意されており、w-100クラスやd-noneクラスなどのユーティリティクラスを組み合わせることで、複雑な表示の切り替えができるレスポンシブWebデザインも実装可能です。
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
基本:全幅、Medium以上:8列カラム
</div>
<div class="col-6 col-md-4">
基本:半カラム、Medium以上:4列カラム
</div>
</div>
<hr>
<div class="row">
<div class="col-6 col-md-4">
基本:半カラム×3、Medium以上:4列カラム×3
</div>
<div class="col-6 col-md-4">
基本:半カラム×3、Medium以上:4列カラム×3
</div>
<div class="col-6 col-md-4">
基本:半カラム×3、Medium以上:4列カラム×3
</div>
</div>
</div>
最後までお読みいただき、本当にありがとうございます。 明日も継続して学習のアウトプットを続けていきたいと思いますので、また覗きにきていただけると嬉しいです! 一緒に学べる仲間が増えると、もっと喜びます!笑 これからも宜しくお願い致しますm(__)m