目次
- はじめに
- 今日作るもの
- STEP 1：Day7用HTMLファイルを作る
- STEP 2：タイトルをDay7用に直す
- STEP 3：詳細ボタンをグレー系にする
- STEP 4：編集ボタンを青系にする
- STEP 5：削除ボタンを赤系にする
- STEP 6：3つのボタンの色分けを確認する
- STEP 7：ここまでの表示確認
- 完成コード
- 使ったTailwind CSSのclass
- 今日分かったこと
- 次回やること
- シリーズ記事
はじめに
この記事は、Tailwind CSSで管理画面UIを1ステップずつ作る学習記録です。
過去記事は末尾の「シリーズ記事」にまとめています。
今日作るもの
Day7では、Day6までに作った 詳細・編集・削除ボタン を、役割ごとに色分けします。
今回はこの方針です。
| ボタン | 役割 | 色 |
|---|---|---|
| 詳細 | 確認系 | グレー系 |
| 編集 | 変更系 | 青系 |
| 削除 | 危険操作 | 赤系 |
STEP 1：Day7用HTMLファイルを作る
まず、Day7用のHTMLファイルを作成します。
day07-button-colors.html
Day6のファイルをコピーして作る形でOKです。
tailwind-learning/
├── day01-heading.html
├── day02-card-base.html
├── day03-image-card.html
├── day04-card-text.html
├── day05-card-buttons.html
├── day06-card-complete.html
└── day07-button-colors.html
STEP 2：タイトルをDay7用に直す
Day7は「管理画面風ボタンを色分けする」日なので、title をDay7用に変更します。
修正前の例
<title>Day 6 作品カードUIを完成させる</title>
修正後
<title>Day 7 管理画面風ボタンを色分けする</title>
STEP 3：詳細ボタンをグレー系にする
まずは 詳細ボタン から色分けします。
詳細ボタンは「確認・参照」系なので、強すぎない グレー系 にします。
修正前
<button class="px-3 py-1.5 rounded-md border text-sm font-medium hover:bg-gray-200">
詳細
</button>
修正後
<button class="px-3 py-1.5 rounded-md border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-200">
詳細
</button>
今回追加・変更するclassはこの3つです。
| class | 内容 |
|---|---|
border-gray-300 |
枠線をグレー系にする |
text-gray-700 |
文字色を濃いグレーにする |
hover:bg-gray-200 |
hover時に薄いグレー背景にする |
詳細ボタンは最初 hover:bg-gray-100 にしましたが、編集・削除ボタンと比べると変化が少し分かりづらかったため、hover:bg-gray-200 に変更しました。
STEP 4：編集ボタンを青系にする
次は 編集ボタン を色分けします。
編集ボタンは「変更・更新」系なので、分かりやすく 青系 にします。
修正前
<button class="px-3 py-1.5 rounded-md border text-sm font-medium hover:bg-gray-200">
編集
</button>
修正後
<button class="px-3 py-1.5 rounded-md border border-blue-500 text-sm font-medium text-blue-600 hover:bg-blue-100">
編集
</button>
今回追加・変更するclassはこの3つです。
| class | 内容 |
|---|---|
border-blue-500 |
枠線を青系にする |
text-blue-600 |
文字色を青系にする |
hover:bg-blue-100 |
hover時に薄い青背景にする |
hover:bg-blue-50 も試せますが、白背景のボタンでは変化が少し分かりづらかったため、今回は hover:bg-blue-100 を使いました。
STEP 5：削除ボタンを赤系にする
次は 削除ボタン を色分けします。
削除ボタンは「危険操作」なので、分かりやすく 赤系 にします。
修正前
<button class="px-3 py-1.5 rounded-md border text-sm font-medium hover:bg-gray-200">
削除
</button>
修正後
<button class="px-3 py-1.5 rounded-md border border-red-500 text-sm font-medium text-red-600 hover:bg-red-100">
削除
</button>
今回追加・変更するclassはこの3つです。
| class | 内容 |
|---|---|
border-red-500 |
枠線を赤系にする |
text-red-600 |
文字色を赤系にする |
hover:bg-red-100 |
hover時に薄い赤背景にする |
削除ボタンは、詳細・編集よりも注意が必要な操作なので、赤系にして視覚的に区別します。
STEP 6：3つのボタンの色分けを確認する
ここまでで、3つのボタンは次のようになりました。
| ボタン | 色の役割 | 主なclass |
|---|---|---|
| 詳細 | 確認・参照系 |
border-gray-300 / text-gray-700 / hover:bg-gray-200
|
| 編集 | 変更・更新系 |
border-blue-500 / text-blue-600 / hover:bg-blue-100
|
| 削除 | 危険操作 |
border-red-500 / text-red-600 / hover:bg-red-100
|
詳細ボタンは確認・参照系なので、控えめなグレー系にしました。
編集ボタンは変更・更新系なので、青系にしました。
削除ボタンは危険操作なので、赤系にしました。
ボタンごとに色を分けることで、操作の意味が視覚的に分かりやすくなりました。
STEP 7：ここまでの表示確認
通常時と、各ボタンにマウスを乗せたときの表示を確認しました。
| 確認項目 | 見るところ |
|---|---|
| 詳細ボタンがグレー系になっている |
border-gray-300 / text-gray-700
|
| 編集ボタンが青系になっている |
border-blue-500 / text-blue-600
|
| 削除ボタンが赤系になっている |
border-red-500 / text-red-600
|
| 詳細ボタンのhoverが分かりやすい | hover:bg-gray-200 |
| 編集ボタンのhoverが分かりやすい | hover:bg-blue-100 |
| 削除ボタンのhoverが分かりやすい | hover:bg-red-100 |
通常時
詳細ボタンhover時
編集ボタンhover時
削除ボタンhover時
完成コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day 7 管理画面風ボタンを色分けする</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<h1 class="text-center text-xl bg-gray-900 text-white p-4">
Admin Dashboard
</h1>
<div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm mx-auto mt-6">
<img
src="images/sample-poster.png"
alt="サンプル画像"
class="w-20 h-28 object-cover rounded-md flex-shrink-0"
>
<div class="flex-1">
<p class="text-lg font-bold">サンプル映画タイトル</p>
<p class="text-sm text-gray-600">
平均評価：<span class="text-yellow-500">4.2</span>
</p>
<p class="text-sm text-gray-600">レビュー数：12件</p>
<div class="flex gap-2 mt-3 flex-wrap">
<button class="px-3 py-1.5 rounded-md border border-gray-300 text-sm font-medium text-gray-700 hover:bg-gray-200">
詳細
</button>
<button class="px-3 py-1.5 rounded-md border border-blue-500 text-sm font-medium text-blue-600 hover:bg-blue-100">
編集
</button>
<button class="px-3 py-1.5 rounded-md border border-red-500 text-sm font-medium text-red-600 hover:bg-red-100">
削除
</button>
</div>
</div>
</div>
</body>
</html>
使ったTailwind CSSのclass
| class | 内容 |
|---|---|
border-gray-300 |
枠線をグレー系にする |
text-gray-700 |
文字色を濃いグレーにする |
hover:bg-gray-200 |
hover時に薄いグレー背景にする |
border-blue-500 |
枠線を青系にする |
text-blue-600 |
文字色を青系にする |
hover:bg-blue-100 |
hover時に薄い青背景にする |
border-red-500 |
枠線を赤系にする |
text-red-600 |
文字色を赤系にする |
hover:bg-red-100 |
hover時に薄い赤背景にする |
今日分かったこと
ボタンの役割ごとに色を分けることで、操作の意味が視覚的に分かりやすくなることが分かりました。
詳細ボタンは確認・参照系なのでグレー系、編集ボタンは変更・更新系なので青系、削除ボタンは危険操作なので赤系にしました。
また、枠線の色、文字色、hover時の背景色を組み合わせることで、ボタンの意味を保ちながら管理画面らしい見た目に整えられました。
hover:bg-gray-100 や hover:bg-blue-50 のように薄い色は、白背景のボタンでは変化が分かりづらいことがありました。
そのため、詳細ボタンは hover:bg-gray-200、編集ボタンは hover:bg-blue-100、削除ボタンは hover:bg-red-100 にして、hover時の変化が分かりやすくなるように調整しました。