★ この記事は以下の背景を持つ方に適しています：
- HTML、CSSに精通している
- Bootstrap 4を正しく読み込む方法を知っている
- Bootstrap 4の一般的なパターンを学びたい方
本題に入る前に、Bootstrap 4を使う場合と使わない場合の違いは何かをお話しします。
簡単に言えば、Bootstrap 4を使わずに手書きでウェブページを作成する場合、HTMLの内容を自分で書く必要があり（当たり前）、CSSも一つ一つ自分で設定する必要があります（また当たり前）。しかし、Bootstrap 4を使えば、多くのよく使うCSSがあらかじめ用意されているので、Bootstrap 4のドキュメントを理解し、どのクラス名がどのCSSに対応するかを知っていれば、タグにそのまま適用するだけで済みます。非常に簡単な例を使って説明します。以下のcodepenをご覧ください。
もちろん、Bootstrap 4を有効にするには、HTML環境に必要な<link>1つと3つの<script>を含める必要があります。これはBootstrap 4のドキュメントにコピー可能なコードがあるので、ここでは繰り返しません。重要なコードだけを説明します。
まず、最初の<div>タグ
<div class="box"></div>
そのCSSは次のようになります。
.box {
width: 100px;
height: 100px;
background: blue;
margin: 48px;
}
この.boxの<div>には、widthとheightをそれぞれ100pxに設定し、background:blue、margin:48pxを設定しています。HTMLとCSSの基礎があれば、これは縦横100pxの青色の正方形で、四辺に48pxの外側余白があると簡単にわかります。
次に、2つ目の<div>にはBootstrap 4のクラスを適用します。
<div class="box2 bg-danger m-5"></div>
CSSは次のようになります。
.box2 {
width: 100px;
height: 100px;
}
この.box2の<div>では、自作のCSSはwidthとheightをそれぞれ100pxに設定しただけです。bq-dangerとm-5はBootstrap 4のクラスです。bq-dangerは背景にdangerテーマ色を使用することを意味し、dangerテーマ色のBootstrap 4のデフォルトカラーコードは#dc3545です。また、m-5のmはmarginを表し、数字5は間隔のサイズを表します。1は0.25倍のrem、2は0.5倍のrem、3は1倍のrem、4は1.5倍のrem、5は3倍のremです。Bootstrap 4のデフォルトの1remは16pxなので、m-5はmargin: 48pxを意味します。つまり、これは縦横100pxの#dc3545色の正方形で、四辺に48pxの外側余白があります。
したがって、Bootstrap 4を使用すると、多くの一般的なクラスがあらかじめ用意されているため、ウェブページをより迅速に開発できます。慣れてしまえば、必要なタグに該当するクラス名を追加するだけで済みます。ここでは簡単な例を示しましたが、基本的にBootstrap 4はこのような考え方です。
Spacing
非常に簡単で、よく使うmarginとpaddingです。まず、これらのコードを覚えましょう。
m：margin
p：padding
t：top
r：right
b：bottom
l：left
x：-right と -left
y：-top と -bottom
上記を組み合わせると、以下のようになります。
m：margin
mt：margin-top
mr：margin-right
mb：margin-bottom
ml：margin-left
mx：margin-right と margin-left
my：margin-top と margin-bottom
p：padding
pt：padding-top
pr：padding-right
pb：padding-bottom
pl：padding-left
px：padding-right と padding-left
py：padding-top と padding-bottom
次に数字です。Bootstrap 4には基本単位として1rem（1rem = 16px）があります。上記のコードの後に数字を付けることで、内側または外側の余白の量を指定します。
1：0.25 * 1rem = 0.25px
2：0.5 * 1rem = 8px
3：1 * 1rem = 16px
4：1.5 * 1rem = 24px
5：3 * 1rem = 48px
今後、marginやpaddingが必要な場合は、次のように記述できます。
mt-3 → margin top：16px
pb-4 → padding bottom：24px
m-2 → margin：8px;
Colors
Bootstrap 4では、色の設定はテーマ色を使用する方法に加えて、色の前にオブジェクトを付けます。例えば、text-primaryは文字にprimaryテーマ色を使用、bq-secondaryは背景にsecondaryテーマ色を使用することを意味します。簡単なcodepenをご覧ください。
<div class="box bg-danger m-5 p-2 text-light">text-danger</div>
<div class="box1 bg-warning m-5 p-4 text-secondary">
<a href="">text-secondary</a>
</div>
これらの2つの<div>に対して、私のCSSはwidthとheightだけを記述しています。すべてのスタイルはBootstrap 4のプリセットクラス名をタグ内に記述して設定しています。そのため、以下のように表示されます。文字の色、背景の色、そしてmarginやpaddingもプリセットクラスで設定されています。2つ目の<div>にマウスを乗せると、中に<a>タグがあるため、ホバー効果も発生します。
Display
すべてのHTMLタグにはデフォルトのdisplayプロパティがあります。そのデフォルトプロパティを変更するには、CSSでdisplayの値を再設定する必要があります。インラインでもブロックでも、今では同様にプリセットクラスをタグ内に記述するだけで変更できます。d-inlineやd-blockなどで直接値を変更できます。codepenをご覧ください。
d-block → display: block
d-inline → display: inline
<div class="bg-danger m-5 p-2 text-light d-inline">d-inline</div>
<div class="bg-warning m-5 p-2 text-secondary d-inline">d-inline</div>
<span class="bg-danger m-5 p-2 text-light d-block">text-danger</span>
<span class="bg-warning m-5 p-2 text-secondary d-block">text-secondary</span>
ここに2つの<div>と2つの<span>タグがあります。本来<div>はブロック要素ですが、classにd-inlineを追加してインライン要素に変更しています。本来<span>はインライン要素ですが、classにd-blockを追加してブロック要素に変更しています。非常に便利ですね。
Border
borderもよく使う機能でしょう。まずcodepenをご覧ください。
Bootstrap 4の世界では、class内に直接記述できます。例えば、border-方向のようにして枠線を追加します。
<div class="box border">四辺に線を表示</div>
<div class="box border-top">上辺に線を表示</div>
<div class="box border-right">右辺に線を表示</div>
<div class="box border-bottom">下辺に線を表示</div>
<div class="box border-left">左辺に線を表示</div>
三辺に線を表示し、一辺だけをキャンセルしたい場合は、border-方向-0のようにして一辺をキャンセルできます。
<div class="box border-0">四辺の線を消す</div>
<div class="box border border border-top-0">上辺の線を消す</div>
<div class="box border border-right-0">右辺の線を消す</div>
<div class="box border border-bottom-0">下辺の線を消す</div>
<div class="box border border-left-0">左辺の線を消す</div>
または、四隅にborder-radius（角丸）を追加するには、rounded-方向を使用します。
<div class="box border rounded">四隅を丸くする</div>
<div class="box border rounded-top">上辺の角を丸くする</div>
<div class="box border rounded-right">右辺の角を丸くする</div>
<div class="box border rounded-bottom">下辺の角を丸くする</div>
<div class="box border rounded-left">左辺の角を丸くする</div>
または、完全な円形（rounded-circle）やカプセル形状（rounded-pill）にすることもできます。
<div class="box border rounded-circle">円形にする</div>
<div class="box box1 border rounded-pill">カプセル形状にする</div>
または、線にテーマ色を追加します。
<div class="box border border-primary">テーマ色を表示</div>
<div class="box border border-danger">テーマ色を表示</div>
すると、以下のようになります。
以上、Spacing、Colors、Display、Borderは、私が考える基本的ながら欠かせないBootstrap 4の汎用パターンです。細部は_variable.scssでカスタマイズして変更できます。以上、気に入っていただければ幸いです。ありがとうございました。
参考資料：