🏁 はじめに
前回（第5章：編集・削除機能を追加してみる）では、CRUD操作をすべて実装し、
ASP.NET MVCアプリとして基本機能を完成させました。
今回は、そのアプリに Bootstrap を導入して、見た目を整えていきます💅
🎯 今回のゴール
Bootstrapを導入して、ボタンやテーブルをきれいに整える
最終的にこうなります👇
- 青い「新規作成」ボタン
- 枠線付きテーブル
- 余白が整ったフォーム
🧩 Step 1：Bootstrapとは？
Bootstrapは、Webデザインを手軽に整えるためのCSSフレームワークです。
HTMLのクラス属性に特定の名前を付けるだけで、きれいなUIが適用されます。
| 要素 | クラス名例 | 効果 |
|---|---|---|
| ボタン | btn btn-primary |
青いボタン |
| テーブル | table table-striped |
交互に背景色のついた表 |
| 余白 |
mt-3, mb-2
|
上下マージンを調整 |
⚙️ Step 2：Bootstrapの導入
ASP.NET Core MVCのテンプレートには、Bootstrapがすでに組み込まれています。
もし _Layout.cshtml に次のような行があればOKです。
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
もしなければ、CDNで直接読み込むこともできます👇
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
🧾 Step 3：レイアウトを整える
Views/Shared/_Layout.cshtml に全体の見た目を指定します。
以下のように <div class="container mt-4"> を使うと、ページ全体に余白ができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewData["Title"] - MyFirstAspNetApp</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">My ASP.NET App</a>
</div>
</nav>
<div class="container mt-4">
@RenderBody()
</div>
</body>
</html>
🎨 Step 4：Todo一覧を整える
Views/Todos/Index.cshtml をBootstrap対応にします👇
@model IEnumerable<MyFirstAspNetApp.Models.Todo>
<h2 class="mb-3">Todo一覧</h2>
<p><a class="btn btn-primary" href="/Todos/Create">＋ 新規作成</a></p>
<table class="table table-striped table-bordered">
<thead class="table-dark">
<tr>
<th>ID</th>
<th>タイトル</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Id</td>
<td>@item.Title</td>
<td>
<a class="btn btn-sm btn-warning" href="/Todos/Edit/@item.Id">編集</a>
<a class="btn btn-sm btn-danger" href="/Todos/Delete/@item.Id">削除</a>
</td>
</tr>
}
</tbody>
</table>
ポイント：
-
btn btn-primary→ 青ボタン -
btn-sm→ 小さいボタン -
table table-striped table-bordered→ スタイリッシュな表
🧩 Step 5：Create/Edit/Delete画面も整える
共通してフォームを中央寄せにし、見やすくします👇
@model MyFirstAspNetApp.Models.Todo
<div class="card p-4 shadow-sm">
<h2 class="mb-3">@ViewData["Title"]</h2>
<form asp-action="Create" method="post">
<div class="mb-3">
<label asp-for="Title" class="form-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-success">登録</button>
<a href="/Todos" class="btn btn-secondary">戻る</a>
</form>
</div>
Bootstrapの「form-control」「form-label」を使うだけで、一気に見た目が整います✨
🧠 Step 6：少し応用 — レイアウト共通化
ページごとに <div class="container"> を書く代わりに、
共通レイアウト _Layout.cshtml にまとめておくのがおすすめです。
また、フッターを追加してみましょう👇
<footer class="text-center mt-5 text-muted">
<hr />
<p>© 2025 My ASP.NET App</p>
</footer>
これを <body> の最後に追加すると、すべてのページに共通フッターが表示されます。
✅ Before / After
| 比較 | 見た目 |
|---|---|
| Before | シンプルで素っ気ないHTMLフォーム |
| After | ボタン・テーブル・余白が整ったモダンなUI |
💬 学んでみて感じたこと
- BootstrapはHTMLのclass属性を変えるだけで見た目が変わる
- ASP.NET MVCでは
_Layout.cshtmlを使って共通UIを簡単に作れる - コードを書かずに「完成度」が一気に上がるのが楽しい！
「動く」から「見せられる」アプリに成長した瞬間です。