Bootstrap5 小工具
この記事では、Bootstrap5で提供される便利なユーティリティクラスについて解説します。これらのクラスを利用することで、色、余白、影、表示/非表示などのよく使われるスタイルや機能を簡単に追加できます。
一、色のクラス
Bootstrap5では、テキストや背景の色を指定するために、いくつかのユーティリティクラスが用意されています。
1. テキストの色
.text-{color}クラスを使用することで、テキストの色を変更できます。
<p class="text-primary">プライマリカラーのテキスト</p>
<p class="text-danger">危険を表す赤色のテキスト</p>
<p class="text-success">成功を表す緑色のテキスト</p>
<p class="text-warning">警告を表す黄色のテキスト</p>
<p class="text-info">情報色のテキスト</p>
2. 背景色
.bg-{color}クラスを使用することで、要素の背景色を変更できます。
<div class="bg-primary">プライマリカラーの背景</div>
<div class="bg-danger">危険を表す赤色の背景</div>
<div class="bg-success">成功を表す緑色の背景</div>
<div class="bg-warning">警告を表す黄色の背景</div>
<div class="bg-info">情報色の背景</div>
3. グラデーション
.bg-gradient-{color}クラスを使用することで、要素にグラデーションを適用できます。
<div class="bg-gradient-primary">プライマリカラーのグラデーション</div>
<div class="bg-gradient-danger">危険を表す赤色のグラデーション</div>
<div class="bg-gradient-success">成功を表す緑色のグラデーション</div>
<div class="bg-gradient-warning">警告を表す黄色のグラデーション</div>
<div class="bg-gradient-info">情報色のグラデーション</div>
二、余白とパディング
Bootstrap5では、要素の余白とパディングを調整するためのユーティリティクラスが用意されています。
1. 余白
要素の外側に余白を設定するには、.m-{size}-{sides}クラスを使用します。
{size}: 0, 1, 2, 3, 4, 5, auto のいずれかを指定します。{sides}: t(上), b(下), s(左), e(右), x(左右), y(上下), 空白(上下左右) のいずれかを指定します。
また、.ms-{size}, .me-{size}, .mt-{size}, .mb-{size}クラスを使用することで、それぞれ左、右、上、下の余白を個別に設定することもできます。
2. パディング
要素の内側にパディングを設定するには、.p-{size}-{sides}クラスを使用します。
{size}: 0, 1, 2, 3, 4, 5, auto のいずれかを指定します。{sides}: t(上), b(下), s(左), e(右), x(左右), y(上下), 空白(上下左右) のいずれかを指定します。
また、.ps-{size}, .pe-{size}, .pt-{size}, .pb-{size}クラスを使用することで、それぞれ左、右、上、下のパディングを個別に設定することもできます。
三、表示属性
Bootstrap5では、要素の表示/非表示や、印刷時の表示状態などを制御するためのユーティリティクラスが用意されています。
1. 表示/非表示
.d-{breakpoint}-{value}クラスを使用することで、画面サイズに応じて要素の表示/非表示を切り替えることができます。
{breakpoint}: xs, sm, md, lg, xl, xxl のいずれかを指定します。{value}: none, block, inline, inline-block などを指定します。
2. その他の表示属性
その他にも、.visible, .invisible, .d-print-{value}などのクラスを使用することで、要素の表示状態を制御できます。
四、影
.shadow-none, .shadow-sm, .shadow, .shadow-lgクラスを使用することで、要素に影を付けることができます。
五、その他の便利なユーティリティ
1. ボーダー
.border, .border-{side}, .border-{breakpoint}-{side}, .rounded, .rounded-{corner}クラスを使用して、要素に枠線や角丸を付けることができます。
2. 位置
.position-{value}, .top-{value}, .start-{value}, .translate-middleクラスを使用して、要素の位置を制御できます。
3. 垂直方向の配置
.align-items-{value}, .align-self-{value}クラスを使用して、要素を親要素内で垂直方向に配置できます。
4. フロート
.float-{value}クラスを使用して、要素をフロートさせることができます。
5. フロートの解除
.clearfixクラスを使用して、要素のフロートを解除できます。
6. オーバーフロー
.overflow-{value}クラスを使用して、要素の内容がオーバーフローした時の処理方法を指定できます。
7. サイズ
.w-{width}, .h-{height}, .mw-100, .mh-100クラスを使用して、要素の幅と高さを設定できます。
8. テキストの配置
.text-{align}クラスを使用して、テキストの配置を設定できます。
9. フォントの太さ
.fw-{weight}クラスを使用して、テキストの太さを設定できます。
10. 行の高さ
.lh-{value}クラスを使用して、テキストの行の高さを設定できます。
11. コンテンツの切り詰め
.text-truncateクラスを使用して、コンテナの幅を超えたテキストを切り詰めることができます。
12. ポインタイベント
.pe-none, .pe-autoクラスを使用して、要素に対するマウスポインタの表示状態を制御できます。
まとめ
Bootstrap5のユーティリティクラスは、Webページのレイアウトやスタイルをすばやく構築するのに役立ち、開発効率を向上させる強力なツールです。
関連情報
Q&A
Q1. Bootstrap5のユーティリティクラスは、どのように使用しますか？
A1. ユーティリティクラスは、HTML要素のclass属性に追加して使用します。たとえば、テキストを赤色にするには、<p class="text-danger">のように記述します。
Q2. 複数のユーティリティクラスを同時に使用できますか？
A2. はい、複数のユーティリティクラスを同時に使用できます。たとえば、<p class="text-danger fw-bold">のように、スペースで区切って複数のクラスを指定します。
Q3. 独自のユーティリティクラスを作成できますか？
A3. はい、SassなどのCSSプリプロセッサを使用することで、独自のユーティリティクラスを作成できます。Bootstrapの公式ドキュメントでは、カスタムユーティリティの作成方法についても解説されています。