目次
- はじめに
- 今日作るもの
- STEP 1：Day4用HTMLファイルを作る
- STEP 2：タイトルをDay4用に直す
- STEP 3：作品情報エリアの仮テキストを整える
- STEP 4：作品タイトルを大きくする
- STEP 5：作品タイトルを太字にする
- STEP 6：評価・レビュー数を小さめにする
- STEP 7：評価・レビュー数を薄いグレーにする
- STEP 8：評価の数値を黄色にする
- 完成コード
- 使ったTailwind CSSのclass
- 表示確認
- 今日分かったこと
- 次回やること
- シリーズ記事
はじめに
この記事は、Tailwind CSSで管理画面UIを1ステップずつ作る学習記録です。
過去記事は末尾の「シリーズ記事」にまとめています。
今日作るもの
Day4では、Day3で作った画像付きカードの右側にある 作品情報エリア の文字を整えます。
今日はまだボタンは作りません。
やるのは タイトル・評価・レビュー数の文字調整 です。
STEP 1：Day4用HTMLファイルを作る
まず、Day4用のHTMLファイルを作成します。
day04-card-text.html
Day3のファイルをコピーして作る形でOKです。
tailwind-learning/
├── day01-heading.html
├── day02-card-base.html
├── day03-image-card.html
└── day04-card-text.html
STEP 2：タイトルをDay4用に直す
Day4は「作品情報の文字を整える」日なので、title をDay4用に変更します。
修正前の例
<title>Day 3 画像付きカード</title>
修正後
<title>Day 4 作品情報の文字を整える</title>
ここだけ修正します。
STEP 3：作品情報エリアの仮テキストを整える
Day3では、右側の作品情報エリアはこの形でした。
<div>
<p>作品タイトル</p>
<p>作品情報エリア</p>
</div>
Day4では、文字装飾の練習をするために、まず中身を少し具体的にします。
修正後
<div>
<p>サンプル映画タイトル</p>
<p>平均評価：4.2</p>
<p>レビュー数：12件</p>
</div>
このSTEPでは、まだTailwind CSSのclassは追加しません。
まずは、文字を整える対象を用意します。
STEP 4：作品タイトルを大きくする
次は、作品タイトルに text-lg を追加します。
修正前
<p>サンプル映画タイトル</p>
修正後
<p class="text-lg">サンプル映画タイトル</p>
text-lg は、文字サイズを少し大きくするclassです。
今回は、作品タイトルを他の情報より目立たせるために使います。
STEP 5：作品タイトルを太字にする
次は、作品タイトルに font-bold を追加します。
修正前
<p class="text-lg">サンプル映画タイトル</p>
修正後
<p class="text-lg font-bold">サンプル映画タイトル</p>
font-bold は、文字を太字にするclassです。
作品タイトルはカード内で一番目立たせたい情報なので、text-lg で少し大きくし、さらに font-bold で強調します。
STEP 6：評価・レビュー数を小さめにする
次は、評価とレビュー数の文字に text-sm を追加します。
修正前
<p>平均評価：4.2</p>
<p>レビュー数：12件</p>
修正後
<p class="text-sm">平均評価：4.2</p>
<p class="text-sm">レビュー数：12件</p>
text-sm は、文字サイズを少し小さくするclassです。
今回は、作品タイトルを目立たせて、評価やレビュー数は補足情報として少し控えめに表示します。
STEP 7：評価・レビュー数を薄いグレーにする
次は、評価とレビュー数の文字に text-gray-600 を追加します。
修正前
<p class="text-sm">平均評価：4.2</p>
<p class="text-sm">レビュー数：12件</p>
修正後
<p class="text-sm text-gray-600">平均評価：4.2</p>
<p class="text-sm text-gray-600">レビュー数：12件</p>
text-gray-600 は、文字色をグレー系にするclassです。
今回は、評価やレビュー数を補足情報として見せるために、タイトルより少し控えめな色にします。
STEP 8：評価の数値を黄色にする
次は、平均評価の数値部分 を少し目立たせます。
今はこうなっていると思います。
<p class="text-sm text-gray-600">平均評価：4.2</p>
<p class="text-sm text-gray-600">レビュー数：12件</p>
これを、平均評価の 4.2 だけ span で囲み、text-yellow-500 を付けます。
<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>
text-yellow-500 は、文字色を黄色系にするclassです。
今回は、評価の数値だけを少し目立たせるために使います。
まだ星評価は作りません。
完成コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day 4 作品情報の文字を整える</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">
<img
src="images/sample-poster.png"
alt="サンプル画像"
class="w-20 h-28 object-cover rounded-md"
>
<div>
<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>
</div>
</body>
</html>
使ったTailwind CSSのclass
| class | 内容 |
|---|---|
text-lg |
文字サイズを少し大きくする |
font-bold |
文字を太字にする |
text-sm |
文字サイズを少し小さくする |
text-gray-600 |
文字色をグレー系にする |
text-yellow-500 |
文字色を黄色系にする |
表示確認
以下の点をブラウザで確認しました。
| 確認項目 | 見るところ |
|---|---|
| 作品タイトルが大きくなっている | text-lg |
| 作品タイトルが太字になっている | font-bold |
| 平均評価・レビュー数が小さめになっている | text-sm |
| 平均評価・レビュー数がグレーになっている | text-gray-600 |
評価数値 4.2 だけ黄色になっている |
text-yellow-500 |
今日分かったこと
text-lg と font-bold を使うことで、作品タイトルを目立たせることができました。
text-sm と text-gray-600 を使うと、平均評価やレビュー数を補足情報として控えめに表示できました。
また、span で評価の数値だけを囲むことで、text-yellow-500 を一部分だけに適用できることが分かりました。
次回やること
【Tailwind CSS入門 Day5】管理画面風のボタンを作る
シリーズ記事
- 【Tailwind CSS入門 Day1】管理画面の見出しを作る
- 【Tailwind CSS入門 Day2】カードUIの土台を作る
- 【Tailwind CSS入門 Day3】画像付きカードを作る
- 【Tailwind CSS入門 Day4】作品情報の文字を整える ← 今回