目次

はじめに
今日作るもの
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】管理画面風のボタンを作る

シリーズ記事