Bootstrap: ユーティリティクラス
最終更新：2026-08-26
1. このレッスンの紹介
(1) 前提条件
- Bootstrapコンテナーとグリッドシステム
- レッスン17 Bootstrapアイコン
(2) 🎯 学習内容
- ボーダーとラウンド（角丸）ユーティリティクラスの使用
- シャドウの深度の制御
- フロートとクリアフィックスの使用
- 可視性（visible/invisible）とオーバーフローの制御
- サイジングユーティリティクラス（w/h）の使用
(3) 課題点
アリスはページ要素のボーダー、シャドウ、角丸を調整するために、多くのカスタムCSSを書く必要があります。Bootstrapのユーティリティクラスを使えば、一つのクラス名で実現できます。
(4) 解決策
Bootstrapは、ボーダー、角丸、シャドウ、フロート、可視性、オーバーフロー、サイジングといった一般的なスタイルをカバーする、包括的なアトミックCSSユーティリティクラスを提供します。
理解のポイント: ユーティリティクラス = CSSスタイルのショートカット —
shadow=box-shadow,rounded=border-radius,border-primary=border-color。一つのクラスが一行のCSSを置き換えます。
(5) メリット
カスタムCSSを書く必要がありません。HTMLで直接クラスを組み合わせるだけで、様々な視覚効果を実現でき、開発とデバッグの速度を大幅に向上させます。
2. ボーダー
ボーダークラス: border, border-top/end/bottom/start, border-0/1/2/3/4/5, border-{color}
(1) ボーダーユーティリティクラス
| クラス | CSS効果 |
|---|---|
border |
四辺に1px solid #dee2e6 のボーダー |
border-top / border-end / border-bottom / border-start |
片側のボーダー |
border-0 |
全てのボーダーを削除 |
border-{1-5} |
ボーダー幅 1px ~ 5px |
border-{color} |
ボーダー色 (primary/success/danger 等) |
(2) ボーダー幅リファレンステーブル
| クラス | CSS | 効果 | 用途例 |
|---|---|---|---|
border-1 |
border-width: 1px |
最も細いボーダー | デフォルトボーダー、テーブルセル |
border-2 |
border-width: 2px |
細いボーダー | カードボーダー、入力フィールド |
border-3 |
border-width: 3px |
中くらいのボーダー | 強調ボーダー、ボタン |
border-4 |
border-width: 4px |
太いボーダー | セクション区切り、タイトル下線 |
border-5 |
border-width: 5px |
最も太いボーダー | 左アクセントライン、警告ボーダー |
▶ サンプル: ボーダー & ラウンドデモ
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Borders & Rounded Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h5>Border Directions</h5>
<div class="d-flex flex-wrap gap-2 mb-4">
<div class="border p-3">border</div>
<div class="border-top p-3">border-top</div>
<div class="border-end p-3">border-end</div>
<div class="border-bottom p-3">border-bottom</div>
<div class="border-start p-3">border-start</div>
</div>
<h5>Border Width</h5>
<div class="d-flex flex-wrap gap-2 mb-4">
<div class="border border-1 p-3">border-1</div>
<div class="border border-2 p-3">border-2</div>
<div class="border border-3 p-3">border-3</div>
<div class="border border-4 p-3">border-4</div>
<div class="border border-5 p-3">border-5</div>
</div>
<h5>Border Colors</h5>
<div class="d-flex flex-wrap gap-2 mb-4">
<div class="border border-primary p-3">primary</div>
<div class="border border-success p-3">success</div>
<div class="border border-danger p-3">danger</div>
<div class="border border-warning p-3">warning</div>
<div class="border border-info p-3">info</div>
<div class="border border-dark p-3">dark</div>
</div>
<h5>Rounded Sizes</h5>
<div class="d-flex flex-wrap gap-2 align-items-center">
<div class="border p-3 rounded-0">rounded-0</div>
<div class="border p-3 rounded-1">rounded-1</div>
<div class="border p-3 rounded-2">rounded-2</div>
<div class="border p-3 rounded-3">rounded-3</div>
<div class="border p-3 rounded-4">rounded-4</div>
<div class="border p-3 rounded-5">rounded-5</div>
<div class="border rounded-circle d-inline-flex align-items-center justify-content-center" style="width:60px;height:60px;">circle</div>
<div class="border rounded-pill px-4 py-2">rounded-pill</div>
</div>
</div>
</body>
</html>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
3. 角丸
角丸クラス: rounded-0/1/2/3/4/5, rounded-circle, rounded-pill, rounded-top/end/bottom/start
(1) 角丸サイズリファレンス
| クラス | border-radius | 効果 |
|---|---|---|
rounded-0 |
0 (角丸なし) | 角が四角 |
rounded-1 |
0.125rem (2px) | わずかな角丸 |
rounded-2 |
0.25rem (4px) | 小さい角丸 |
rounded-3 |
0.375rem (6px) | デフォルトの角丸 |
rounded-4 |
0.5rem (8px) | 中くらいの角丸 |
rounded-5 |
0.75rem (12px) | 大きな角丸 |
rounded-circle |
50% (完全な円) | 円形 |
rounded-pill |
100rem (ピル形状) | ピル形状 |
(2) 片側の角丸
| クラス | 説明 |
|---|---|
rounded-top |
上2つの角を丸める |
rounded-end |
右2つの角を丸める |
rounded-bottom |
下2つの角を丸める |
rounded-start |
左2つの角を丸める |
HTML
<img src="https://via.placeholder.com/100" class="rounded-circle" width="100" height="100" alt="Avatar">
<button class="btn btn-primary rounded-pill px-4">Pill Button</button>
<div class="rounded-4 p-3 bg-light border">Extra rounded corners</div>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
▶ サンプル: ボーダー効果ギャラリー
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Effects Gallery</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<div class="row g-4">
<div class="col-md-4"><div class="border border-primary p-3 rounded">Primary Border</div></div>
<div class="col-md-4"><div class="border border-success border-3 p-3 rounded-3">Success Thick</div></div>
<div class="col-md-4"><div class="border border-danger border-5 p-3 rounded-pill">Danger Pill</div></div>
<div class="col-md-4"><div class="border-top border-warning border-4 p-3">Top Only</div></div>
<div class="col-md-4"><div class="border-start border-info border-5 ps-3">Start Accent</div></div>
<div class="col-md-4"><div class="border-0 bg-light p-3 rounded-circle text-center" style="width:80px;height:80px;">No Border</div></div>
</div>
</div>
</body>
</html>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
シャドウクラス: shadow-none, shadow-sm, shadow, shadow-lg
(1) シャドウ比較表
| クラス | CSS box-shadow | 視覚的深度 | 用途例 |
|---|---|---|---|
shadow-none |
影なし | フラット | テーブル、リスト、カードグループ |
shadow-sm |
0 0.125rem 0.25rem |
浅い | デフォルトカード、小型ウィジェット |
shadow |
0 0.5rem 1rem |
中程度 | ドロップダウン、ポップオーバー |
shadow-lg |
0 1rem 3rem |
深い | モーダル、トースト、通知 |
HTML
<div class="shadow-none p-3 mb-3 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-3 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-3 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-3 bg-body rounded">Large shadow</div>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
▶ サンプル: シャドウ深度比較
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Depth Comparison</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.shadow-card { transition: transform 0.2s, box-shadow 0.2s; cursor: default; }
.shadow-card:hover { transform: translateY(-4px); }
</style>
</head>
<body>
<div class="container py-4">
<h2 class="mb-4">Shadow Depth Scale</h2>
<div class="row g-4">
<div class="col-md-3">
<div class="card shadow-none p-4 text-center shadow-card h-100 border">
<div class="display-6 text-body-tertiary mb-2">0</div>
<h5>shadow-none</h5>
<p class="text-body-secondary small mb-0">No shadow, flat design. Good for tables and card groups.</p>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-sm p-4 text-center shadow-card h-100">
<div class="display-6 text-secondary mb-2">1</div>
<h5>shadow-sm</h5>
<p class="text-body-secondary small mb-0">Subtle depth. Default for cards, small UI widgets.</p>
</div>
</div>
<div class="col-md-3">
<div class="card shadow p-4 text-center shadow-card h-100">
<div class="display-6 text-body mb-2">2</div>
<h5>shadow</h5>
<p class="text-body-secondary small mb-0">Moderate depth. Used for dropdowns and popovers.</p>
</div>
</div>
<div class="col-md-3">
<div class="card shadow-lg p-4 text-center shadow-card h-100">
<div class="display-6 text-dark mb-2">3</div>
<h5>shadow-lg</h5>
<p class="text-body-secondary small mb-0">Prominent depth. Ideal for modals, toasts, notifications.</p>
</div>
</div>
</div>
<h2 class="mt-5 mb-4">Combined Effects</h2>
<div class="d-flex gap-3 flex-wrap">
<div class="card shadow-sm rounded-3 p-4" style="width:200px;">shadow-sm + rounded-3</div>
<div class="card shadow rounded-4 border-0 p-4" style="width:200px;">shadow + rounded-4</div>
<div class="card shadow-lg rounded-pill px-4 py-3 text-center" style="width:220px;">shadow-lg + pill</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
4. フロート & クリアフィックス
| クラス | 効果 |
|---|---|
float-start |
float: left |
float-end |
float: right |
float-none |
float: none |
clearfix |
フロートをクリア（親コンテナーに使用） |
HTML
<div class="clearfix">
<div class="float-start bg-primary text-white p-3 rounded">Float left</div>
<div class="float-end bg-success text-white p-3 rounded">Float right</div>
</div>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。 注: 多くのシナリオでは、フロートよりもFlexboxレイアウトが一般的に推奨されます。Bootstrap 5のフロートプロパティは主に画像の周りにテキストを回り込ませるために使用されます。
(1) フロート vs Flex vs グリッドレイアウトの選択
| 次元 | フロートレイアウト | Flexboxレイアウト | CSSグリッドレイアウト |
|---|---|---|---|
| Bootstrapクラス | float-start/end + clearfix |
d-flex + flex-* |
row + col-* |
| 用途 | 画像の周りにテキストを回り込ませる、単純な左右配置 | 一次元配置（行または列）、中央揃え、均等分配 | 二次元グリッド、複数行/列、複雑なレイアウト |
| レスポンシブサポート | 限定的 (float-md-start) |
豊富 (flex-md-row 等) |
豊富 (col-md-6 等) |
| 配置機能 | 弱い（追加のクリアフィックスが必要） | 強い (align-items-* justify-content-*) |
強い (align-self-* justify-items-*) |
| Bootstrap推奨度 | ⚠ 非推奨（テキスト回り込み専用） | ✅ 推奨（一次元レイアウト） | ✅ 推奨（二次元レイアウト） |
5. 可視性 & オーバーフロー
(1) 可視性
| クラス | CSS | 説明 |
|---|---|---|
visible |
visibility: visible |
要素を表示 |
invisible |
visibility: hidden |
非表示だがスペースを占有 |
(2) オーバーフロー
| クラス | CSS | 説明 |
|---|---|---|
overflow-auto |
overflow: auto |
オーバーフロー時にスクロール |
overflow-hidden |
overflow: hidden |
オーバーフローを非表示 |
overflow-visible |
overflow: visible |
オーバーフローを表示（デフォルト） |
overflow-scroll |
overflow: scroll |
常にスクロールバーを表示 |
(3) 垂直方向の配置
| クラス | CSS |
|---|---|
align-baseline |
vertical-align: baseline |
align-top |
vertical-align: top |
align-middle |
vertical-align: middle |
align-bottom |
vertical-align: bottom |
align-text-top |
vertical-align: text-top |
align-text-bottom |
vertical-align: text-bottom |
HTML
<!-- Visibility -->
<div class="visible p-2 bg-light border">Visible element</div>
<div class="invisible p-2 bg-light border">Invisible (still occupies space)</div>
<!-- Overflow -->
<div class="overflow-auto border p-2" style="height: 80px;">Content that may overflow...</div>
<div class="overflow-hidden border p-2" style="height: 80px;">Hidden overflow content...</div>
<!-- Vertical alignment -->
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
▶ サンプル: オーバーフロースクロール例
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Overflow Examples</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.overflow-box { border: 2px solid #dee2e6; border-radius: 0.5rem; padding: 0.5rem; }
</style>
</head>
<body>
<div class="container py-4">
<h2 class="mb-4">Overflow Behaviors</h2>
<div class="row g-3">
<div class="col-md-3">
<div class="overflow-box overflow-auto" style="height:120px;">
<p class="fw-bold text-success">overflow-auto</p>
<p>Scrolls when content overflows. Bootstrap provides utility classes to control how content behaves when it exceeds its container. The overflow-auto class adds scrollbars only when needed, keeping the layout clean while ensuring content remains accessible to users.</p>
</div>
</div>
<div class="col-md-3">
<div class="overflow-box overflow-hidden" style="height:120px;">
<p class="fw-bold text-danger">overflow-hidden</p>
<p>Content clipped. The overflow-hidden class clips content that exceeds the container boundaries, hiding any overflow without scrollbars.</p>
</div>
</div>
<div class="col-md-3">
<div class="overflow-box overflow-visible" style="height:120px;">
<p class="fw-bold text-warning">overflow-visible</p>
<p>Content overflows bounds. The overflow-visible class allows content to overflow beyond the container.</p>
</div>
</div>
<div class="col-md-3">
<div class="overflow-box overflow-scroll" style="height:120px;">
<p class="fw-bold text-primary">overflow-scroll</p>
<p>Always shows scrollbars. The overflow-scroll class forces scrollbars to always display, even when content fits.</p>
</div>
</div>
</div>
<h2 class="mt-4">Horizontal Overflow</h2>
<div class="overflow-auto bg-light p-2 rounded border" style="white-space: nowrap; max-width: 100%;">
<span class="badge bg-primary me-2">Tag 1</span>
<span class="badge bg-success me-2">Tag 2</span>
<span class="badge bg-warning me-2">Tag 3</span>
<span class="badge bg-danger me-2">Tag 4</span>
<span class="badge bg-info me-2">Tag 5</span>
<span class="badge bg-dark me-2">Tag 6</span>
<span class="badge bg-secondary me-2">Tag 7</span>
<span class="badge bg-primary me-2">Tag 8</span>
<span class="badge bg-success me-2">Tag 9</span>
<span class="badge bg-warning me-2">Tag 10</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
6. サイジング
(1) 幅
| クラス | CSS |
|---|---|
w-25 / w-50 / w-75 / w-100 |
width: 25%/50%/75%/100% |
mw-100 |
max-width: 100% |
vw-100 |
width: 100vw |
min-vw-100 |
min-width: 100vw |
(2) 高さ
| クラス | CSS |
|---|---|
h-25 / h-50 / h-75 / h-100 |
height: 25%/50%/75%/100% |
mh-100 |
max-height: 100% |
vh-100 |
height: 100vh |
min-vh-100 |
min-height: 100vh |
HTML
<div class="w-25 bg-primary text-white p-2 rounded-1 mb-1">w-25 (25%)</div>
<div class="w-50 bg-success text-white p-2 rounded-1 mb-1">w-50 (50%)</div>
<div class="w-75 bg-info text-white p-2 rounded-1 mb-1">w-75 (75%)</div>
<div class="w-100 bg-danger text-white p-2 rounded-1 mb-1">w-100 (100%)</div>
<div class="mw-100 bg-warning p-2 rounded-1" style="width: 200%;">mw-100 (max 100%)</div>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
▶ サンプル: 幅 & 高さプレイグラウンド
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Width & Height Playground</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<h2 class="mb-3">Width Classes</h2>
<div class="mb-4">
<div class="w-25 p-3 mb-2 bg-primary text-white rounded-1">w-25</div>
<div class="w-50 p-3 mb-2 bg-success text-white rounded-1">w-50</div>
<div class="w-75 p-3 mb-2 bg-info text-white rounded-1">w-75</div>
<div class="w-100 p-3 mb-2 bg-danger text-white rounded-1">w-100</div>
</div>
<h2 class="mb-3">Height Classes</h2>
<div class="d-flex gap-2 border rounded-3 p-3 mb-4" style="height:160px;">
<div class="h-25 bg-primary text-white p-2 rounded-1 d-flex align-items-center">h-25</div>
<div class="h-50 bg-success text-white p-2 rounded-1 d-flex align-items-center">h-50</div>
<div class="h-75 bg-info text-white p-2 rounded-1 d-flex align-items-center">h-75</div>
<div class="h-100 bg-danger text-white p-2 rounded-1 d-flex align-items-center">h-100</div>
</div>
<h2 class="mb-3">Viewport Units</h2>
<div class="vw-100 bg-warning text-dark p-2 rounded-1 mb-2">vw-100 (100% viewport width)</div>
<div class="min-vw-100 bg-light border p-2 rounded-1">min-vw-100 (minimum 100% viewport)</div>
<h2 class="mt-4 mb-3">Use Case: Sidebar + Content</h2>
<div class="d-flex border rounded-3 overflow-hidden">
<div class="w-25 bg-dark text-white p-3">
<p class="fw-bold mb-1">Sidebar</p>
<small>w-25</small>
</div>
<div class="w-75 bg-light p-3">
<p class="fw-bold mb-1">Main Content</p>
<small>w-75</small>
</div>
</div>
<h2 class="mt-4 mb-3">Max Constraints</h2>
<div class="mw-100 border p-2 rounded-1 mb-2" style="width:200%; background:#f8f9fa;">mw-100 limits width to 100%</div>
<div class="mh-100 border p-2 rounded-1" style="height:50px; background:#f8f9fa;">mh-100 allows up to 100% height</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
(1) ユーティリティクラス構造図
graph TD
A[Bootstrap ユーティリティ] --> B[スペーシング]
A --> C[タイポグラフィ]
A --> D[レイアウト]
A --> E[ビジュアル]
A --> F[インタラクティブ]
B --> B1[m/p + {side} + {size}]
C --> C1[text-* / fw-* / fs-*]
D --> D1[表示 d-*]
D --> D2[フレックス flex-*]
D --> D3[フロート float-*]
D --> D4[幅/高さ w-*/h-*]
E --> E1[ボーダー border-*]
E --> E2[角丸 rounded-*]
E --> E3[シャドウ shadow-*]
E --> E4[カラー text-*/bg-*]
F --> F1[オーバーフロー overflow-*]
F --> F2[可視性 visible/invisible]
F --> F3[垂直方向の配置 align-*]
出力: Bootstrap 5.3 スタイルのコンポーネント効果（ボタン、カード、カルーセル、コラプスなど）。ページはデフォルトのBootstrapテーマ（ライト）とレスポンシブグリッドを使用しています。
❓ よくある質問
Q ユーティリティクラスはコンポーネントクラスと混ぜて使えますか？
A はい、これはまさにBootstrapの設計哲学です。カードコンポーネントに
shadowを追加し、ボタンにrounded-pillを追加し、テーブルにborder-0を追加できます。ユーティリティクラスはコンポーネントの「調味料」のようなもので、自由に組み合わせることができます。Q
border-* や rounded-* はブレークポイント接尾辞をサポートしますか？A ほとんどのものはサポートしません（CSS変数の上書きで実装されていますが）、
borderクラスはborder-md-0のようにレスポンシブブレークポイントでボーダーを削除するものをサポートしています。Q
invisible と d-none の違いは何ですか？A
invisibleは要素を非表示にしますが、要素はページ上にスペースを占有し続けます（visibility: hidden）。d-noneは要素を完全に削除します（display: none）ので、スペースを占有しません。Q 複数のユーティリティクラスが競合する場合、どの優先度が高いですか？
A 同じCSSプロパティについては、後で定義されたクラスが有効になります。Bootstrapのユーティリティクラスは後で読み込まれるため、一般的な優先度は: コンポーネントクラス < ユーティリティクラス < カスタムCSSです。例えば、
text-primaryはカードのデフォルトの色を上書きし、border-0はテーブルのボーダーを上書きします。強制的に上書きするには、!importantやより高い特異性のセレクターを使用してください。Q ユーティリティクラスの値をカスタマイズできますか？
A はい、Sass経由で可能です。
$utilitiesマップのvaluesを上書きして、ユーティリティクラスの値を追加または変更します。例えば、w-15、w-35のような幅の値を追加したり、shadow-*のシャドウのサイズを変更したりできます。CDN方式ではカスタマイズできず、プリセットの値のみ使用できます。📖 まとめ
- ボーダー:
border,border-{direction},border-{width},border-{color} - 角丸:
rounded-{0-5},rounded-circle,rounded-pill, 片側の角丸 - シャドウ:
shadow-sm,shadow,shadow-lg,shadow-none - フロート:
float-start/end+clearfix; 可視性:visible/invisible - サイジング:
w-{25/50/75/100},h-{25/50/75/100}, ビューポート単位 - オーバーフロー:
overflow-auto/hidden/visible/scroll
📝 練習問題
- ⭐ 異なる角丸の3つのカードを作成しましょう：角が四角の名刺スタイルの
rounded-0、標準的なカードのrounded-3、ピルボタンスタイルのrounded-pill。 - ⭐⭐ 小さいシャドウと大きいシャドウの比較を作成しましょう：
shadow-smとshadow-lgを使用した2つのカードを並べて配置してください。 - ⭐⭐⭐
w-50とmx-autoを使用して、幅が50%の中央揃えのブロックを作成し、border+rounded-4+shadowを追加しましょう。
前のレッスン: Bootstrapアイコン · 次のレッスン: 実践プロジェクト：企業サイトホームページ
