8.7 Bootstrapによるスマホへの対応
（１）ユーティリティークラスによるスタイル設定
BootstrapはCSSを書く代わりに、あらかじめ定義されたクラス（ユーティリティークラス）をHTML要素に指定することでスタイルを設定することができます。例えば次のように使います。
<div className="ms-3">テスト文字列</div>“ms-3”は、左側のマージンを３rem(デフォルトでは1rem =16px)開けるスタイリングを行ないます。結果として、以下と同等の表示になります。
# CSS
.my-cls {
margin-left: 3rem;
}
# HTML
<div className="my-cls”> テスト文字列</div>
（２）ユーティリティークラスの使い方
ユーティリティークラスによって設定できる主なスタイルには、カラー、フォントサイズ、マージン、パディング、ギャップ、ディスプレイ配置などがあります。他にも多数あり、特定の部品（ButtonとかTableなど）固有のクラスなどもあります。
クラス名には命名規則があり、これに従って作られています。
基本ルール
[属性略号]-[値]
属性とその値をハイフンで繋ぐ形で記述するのが基本的なルールになっています。属性名は、必ずしもCSSで使われるものと同じではなく省略された略号になります。例えばmargin属性はmと略されます。
以下に、この基本ルールで表される主なユーティリティークラスを紹介します。
カラー設定関連
| 属性 | 使用例 |
|---|---|
| 背景色 (background-color) | bg-white, bg-primary |
| テキスト色 (color) | text-white, text-primary |
ユーティリティークラスでは「白」意外はそのまま色を指定するのではなく、意味（役割）を値として指定し、意味（役割）に紐づいた色を設定することになります。
| 意味 | 色 |
|---|---|
| primaly | 青 |
| secondary | グレー |
| success | 緑 |
| danger | 赤 |
| warning | 黄 |
フォントサイズ
| 属性 | 使用例 |
|---|---|
| フォントサイズ (font-size) | fs-1, fs-3 |
フォントサイズで指定できる値は、１～６で、数字が小さいほどフォントサイズが大きくなります。
| 値 | 文字サイズ |
|---|---|
| 1 | 2.5 rem |
| 2 | 2 rem |
| 3 | 1.75 rem |
| 4 | 1.5 rem |
| 5 | 1.25 rem |
| 6 | 1 rem |
スペーシング関連
| 属性 | 使用例 |
|---|---|
| マージン (margin) | m-3, m-5 |
| パディング (padding) | p-3, p-5 |
| ギャップ (gap) | gap-3, gap-5 |
マージン、パディング、ギャップで指定できる値は０～５で数字が大きいほどスペースが大きくなります。
| 値 | スペースサイズ |
|---|---|
| 0 | 0 rem |
| 1 | 0.25 rem |
| 2 | 0.5 rem |
| 3 | 1 rem |
| 4 | 1.5 rem |
| 5 | 3 rem |
テキスト配置
| 属性 | 使用例 |
|---|---|
| テキストアライメント (text-align) | text-start, text-center, text-end |
要素の配置関連
| 属性 | 使用例 |
|---|---|
| ディスプレイ配置 (display) | d-flex, d-inline |
| フレックスディレクション (flex-direction) | flex-row, flex-column |
方向を持つ属性の場合のルール
[属性略号][方向]-[値]
方向とは、要素の右/左/上/下のことです。
| 方向 | 値 |
|---|---|
| 左 (start) | s |
| 右 (end) | e |
| 上 (top) | t |
| 下 (bottom) | b |
以下の属性で方向ごとの設定ができます。
| 属性 | 使用例 |
|---|---|
| マージン (margin) | ms-3, me-3, mt-3, mb-3 |
| パディング (padding) | ps-3, pe-3, pt-3, mb-3 |
（３）スマホへの対応
画面サイズ（横幅）によってデザインを切り替える仕組み
Bootstrapは「スマホの時は縦並び、PCの時は横並び」といった画面サイズに応じた切り替えを、クラス名だけで実現する仕組みを持っています。画面幅がある値より大きいか小さいかによってスタイルを変えることができ、大きいか小さいかの境界値を「ブレークポイント」と呼び、以下のルールで表記します。
[属性略号]-[ブレークポイント]-[値]
[属性略号][方向]-[ブレークポイント]-[値]
Bootstrapでは画面サイズ（ブレイクポイント）は以下のような略称で表します。
| 略称 | サイズ |
|---|---|
| xs | 0 |
| sm | 576 px |
| md | 768 px |
| lg | 992 px |
| xl | 1200 px |
| xxl | 1400 px |
例えば、className="m-xs-0 m-lg-3"とすれば、画面の横サイズが992px以上になった時にのみマージンが設定されます。
ブレークポイントを指定できる主なものを以下に示します。
| 属性 | 使用例 |
|---|---|
| マージン (margin) | m-md-3, m-md-5 |
| パディング (padding) | p-md-3, p-md-5 |
| ギャップ (gap) | gap-md-3, gap-md-5 |
| テキストアライメント (text-align) | text-lg-start, text-lg-center, text-lg-end |
| ディスプレイ配置 (display) | d-md-flex, d-md-inline |
| フレックスディレクション (flex-direction) | flex-md-row, flex-md-column |
よく使うテクニック
スマホだけ表示（または非表示）にする
特定の要素をスマホの画面サイズだけで表示したい、あるいは非表示にしたい場合は、表示クラス（d-noneやd-blockなど）を組み合わせます。 [1]
- スマホだけ表示・PCでは非表示：class="d-block d-md-none"
- スマホだけ非表示・PCで表示：class="d-none d-md-block"
スマホの時だけ縦並びにする
通常は横並び（カラム）にしている要素を、スマホサイズの時だけ縦並びにするには、d-flexのflexにブレークポイントを使います。
- 例：class=“d-flex flex-column flex-md-row”
スマホでの余白を調整する
スマホ画面ではPCと比べて画面が狭いため、パディング（内側の余白）やマージン（外側の余白）を小さく調整したい場面でユーティリティクラスを活用します。
- 例：class="p-2 p-md-5"（スマホ時は p-2 の小さな余白にし、MDサイズ以上の画面では p-5 の大きな余白にする）