目次
- はじめに
- シリーズ記事
- 今日作るもの
- STEP1：カードの箱を作る
- STEP2：白背景を付ける
- STEP3：画面背景を薄いグレーにする
- STEP4：枠線を付ける
- STEP5：角丸を付ける
- STEP6：影を付ける
- STEP7：内側余白を付ける
- 完成コード
- 使ったTailwind CSSのclass
- 表示確認
- 今日分かったこと
- 次回やること
はじめに
この記事は、Tailwind CSSを使って管理画面UIを1ステップずつ作る学習記録です。
Day2では、カードUIの土台として、白背景・枠線・角丸・影・余白を指定したシンプルなカードを作成します。
シリーズ記事
- 【Tailwind CSS入門 Day1】管理画面の見出しを作る
- 【Tailwind CSS入門 Day2】カードUIの土台を作る
今日作るもの
Day2では、作品カードの外枠だけを作ります。
画像・タイトル・評価・ボタンはまだ入れません。
STEP1：カードの箱を作る
まずは、見出しの下にカード用の div を追加します。
<div>
カードUIの土台
</div>
この時点では、まだTailwind CSSのclassは付けていません。
まずはカードになる箱だけを用意します。
STEP2：白背景を付ける
カードの背景を白にするため、div に bg-white を追加します。
<div class="bg-white">
カードUIの土台
</div>
STEP3：画面背景を薄いグレーにする
bg-white を付けても、画面全体の背景が白いままだと、カードの範囲が分かりにくいです。
そこで、body に bg-gray-100 を追加します。
これにより、画面全体の背景が薄いグレーになり、白いカード部分が見えやすくなります。
<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">
カードUIの土台
</div>
</body>
bg-white だけでは画面全体の背景と同じ白色なので、カードの範囲が分かりにくい状態でした。
body に bg-gray-100 を付けることで、画面全体が薄いグレーになり、白いカード部分が分かりやすくなりました。
STEP4：枠線を付ける
カードの範囲を分かりやすくするため、div に border を追加します。
<div class="bg-white border">
カードUIの土台
</div>
border は、要素に枠線を付けるclassです。
白背景だけではカードの境界が分かりにくいため、枠線を付けることでカードUIらしく見えるようになります。
STEP5：角丸を付ける
カードの角を丸くするため、div に rounded-lg を追加します。
<div class="bg-white border rounded-lg">
カードUIの土台
</div>
rounded-lg は、要素の角を丸くするclassです。
ただし、今回はカードの横幅をまだ指定していないため、画面幅いっぱいに広がっていて角丸の変化は少し分かりにくいです。
この時点では、rounded-lg は「角を丸くするclass」として確認しておきます。
Day2ではまだ
max-w-*やmx-autoは扱わないので、変化が分かりにくかったです。
STEP6：影を付ける
カードに少し立体感を出すため、div に shadow-sm を追加します。
<div class="bg-white border rounded-lg shadow-sm">
カードUIの土台
</div>
shadow-sm は、要素に小さな影を付けるclassです。
影は控えめですが、枠線だけの状態よりもカードが少し浮いて見えるようになります。
今回は小さめの影にしたいため、shadow-sm を使いました。
STEP7：内側余白を付ける
カード内の文字と枠線の間に余白を作るため、div に p-4 を追加します。
<div class="bg-white border rounded-lg shadow-sm p-4">
カードUIの土台
</div>
p-4 は、要素の内側に余白を付けるclassです。
p-4 を付けることで、文字が枠線にくっつかなくなり、カードUIらしい見た目になりました。
Day2で追加したclassの中では、p-4 が一番変化を分かりやすく感じました。
完成コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day 2 カードUIの土台</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">
カードUIの土台
</div>
</body>
</html>
使ったTailwind CSSのclass
| class | 内容 |
|---|---|
bg-gray-100 |
画面全体の背景を薄いグレーにする |
bg-white |
カードの背景を白にする |
border |
カードに枠線を付ける |
rounded-lg |
カードの角を丸くする |
shadow-sm |
カードに小さな影を付ける |
p-4 |
カードの内側に余白を付ける |
表示確認
以下の点をブラウザで確認しました。
- 画面全体の背景が薄いグレーになった
- カード部分の背景が白になった
- カードに枠線が付いた
-
p-4により、文字と枠線の間に余白ができた
今日分かったこと
bg-white を付けるだけでは、画面全体の背景も白いため変化が分かりにくいことが分かりました。
body に bg-gray-100 を付けることで、白いカード部分が背景から分かりやすくなりました。
また、p-4 を付けると、カード内の文字と枠線の間に余白ができました。
余白がない状態よりも、カードUIらしく見えるようになりました。
次回やること
【Tailwind CSS入門 Day3】画像付きカードを作る