0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@honda-dev-jp

【Tailwind CSS入門 Day6】作品カードUIを完成させる

0
Last updated at Posted at 2026-05-15

目次

はじめに

この記事は、Tailwind CSSで管理画面UIを1ステップずつ作る学習記録です。
過去記事は末尾の「シリーズ記事」にまとめています。

今日作るもの

Day6では、Day1〜Day5で作ってきた内容を整理して、作品カードUIとして完成形に近づけます。

今日は大きな新機能というより、主に以下を整えます。

  • カードの横幅
  • カードの配置
  • 作品情報とボタンの間隔
  • 全体の見た目
  • 完成カードとしてのバランス

STEP 1：Day6用HTMLファイルを作る

まず、Day6用のHTMLファイルを作成します。

day06-card-complete.html

Day5のファイルをコピーして作る形で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

STEP 2：タイトルをDay6用に直す

Day6は「作品カードUIを完成させる」日なので、title をDay6用に変更します。

修正前の例

<title>Day 5 管理画面風のボタンを作る</title>

修正後

<title>Day 6 作品カードUIを完成させる</title>

ここだけ修正します。

STEP 3：カードの横幅を制限する

今のカードは、画面いっぱいに横に広がっている状態だと思います。

Day6では完成カードらしくするために、カード本体の div に max-w-sm を追加します。

修正前

<div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4">

修正後

<div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm">

max-w-sm は、要素の最大幅を小さめに制限するclassです。

これにより、カードが画面いっぱいに広がらず、カードUIらしい幅になります。

STEP 4：カードを中央寄せにする

max-w-sm を付けるとカードの横幅は狭くなりますが、まだ左寄せになっていると思います。

次は、カード本体の div に mx-auto を追加します。

修正前

<div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm">

修正後

<div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm mx-auto">

mx-auto は、左右の外側余白を自動にして、要素を中央寄せするclassです。

max-w-sm と組み合わせることで、カードが画面中央に配置されます。

STEP 5：カードの上に余白を付ける

カードが見出しのすぐ下にあると少し詰まって見えるので、カード本体の div に mt-6 を追加します。

修正前

<div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm mx-auto">

修正後

<div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4 max-w-sm mx-auto mt-6">

mt-6 は、要素の上側に外側余白を付けるclassです。

CSSでいう margin-top に近い指定で、見出しとカードの間に余白を作ることができます。

カードが見出しに近すぎると詰まって見えるため、mt-6 を追加して見やすくしました。

STEP 6：作品情報とボタンの間に余白を付ける

作品情報とボタンの間に少し余白を付けるため、ボタンを囲んでいる div に mt-3 を追加します。

修正前

<div class="flex gap-2">

修正後

<div class="flex gap-2 mt-3">

mt-3 は、要素の上側に少し外側余白を付けるclassです。

ここまでで、以下の余白が入りました。

追加したclass 役割
mt-6 見出しとカードの間に余白を作る
mt-3 レビュー数とボタンの間に余白を作る

mt-3 を追加することで、レビュー数とボタンの間に余白ができました。

文字情報と操作ボタンが近すぎると詰まって見えるため、少し間隔を空けることで見やすくなりました。

STEP 7：作品情報エリアを広げる

右側の作品情報エリアの div に flex-1 を追加します。

修正前

<div>
    <p class="text-lg font-bold">サンプル映画タイトル</p>

修正後

<div class="flex-1">
    <p class="text-lg font-bold">サンプル映画タイトル</p>

flex-1 は、親要素が flex のときに、残りの幅を使って広がるclassです。

今回は、左側の画像以外の残り幅を作品情報エリアが使えるようにします。

flex-1 を追加することで、作品情報エリアが横幅を使いやすくなり、カード内のレイアウトが安定しました。

STEP 8：画像エリアが縮まないようにする

カード全体が flex になっているため、画面幅や内容によっては画像エリアが縮むことがあります。

左側の画像に flex-shrink-0 を追加します。

修正前

<img
    src="images/sample-poster.png"
    alt="サンプル画像"
    class="w-20 h-28 object-cover rounded-md"
>

修正後

<img
    src="images/sample-poster.png"
    alt="サンプル画像"
    class="w-20 h-28 object-cover rounded-md flex-shrink-0"
>

flex-shrink-0 は、flex の中で要素が縮まないようにするclassです。

今回の表示では大きな変化は体感しにくかったですが、カード内の文字が長くなった場合や画面幅が狭い場合に、画像サイズを安定させるための指定として追加しました。

STEP 9：ボタンが折り返せるようにする

カード幅が狭い場合、ボタンが横に収まりにくくなることがあります。

ボタンを囲んでいる div に flex-wrap を追加します。

修正前

<div class="flex gap-2 mt-3">

修正後

<div class="flex gap-2 mt-3 flex-wrap">

flex-wrap は、横並びの要素が入りきらないときに折り返せるようにするclassです。

今回の表示ではボタンが横幅内に収まっていたため、大きな見た目の変化はありませんでした。

ただし、ボタン数が増えた場合や画面幅が狭くなった場合に、ボタンがはみ出しにくくなるため、レイアウト崩れを防ぐ指定として追加しました。

STEP 10：ここまでの表示確認

今の状態で、ブラウザ表示を確認します。

確認するポイントはこのあたりです。

確認項目 見るところ
カードの横幅が狭くなっている max-w-sm
カードが中央寄せになっている mx-auto
見出しとカードの間に余白がある mt-6
作品情報とボタンの間に余白がある mt-3
作品情報エリアが残り幅を使っている flex-1
画像サイズが安定している flex-shrink-0
ボタンが折り返し可能になっている flex-wrap

今回のポイントは、見た目が大きく変わるclassと、崩れにくくするための保険classが混ざっていることです。

見た目が分かりやすい：
max-w-sm / mx-auto / mt-6 / mt-3

見た目では体感しにくいが、崩れ防止になる：
flex-1 / flex-shrink-0 / flex-wrap

day06-card-complete.png

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 6 作品カード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 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 text-sm font-medium hover:bg-gray-200">
                    詳細
                </button>

                <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 text-sm font-medium hover:bg-gray-200">
                    削除
                </button>
            </div>
        </div>
    </div>
</body>
</html>

使ったTailwind CSSのclass

class 内容
max-w-sm 要素の最大幅を小さめに制限する
mx-auto 左右の外側余白を自動にして、要素を中央寄せする
mt-6 要素の上側に外側余白を付ける
mt-3 要素の上側に少し外側余白を付ける
flex-1 親要素が flex のときに、残りの幅を使って広がる
flex-shrink-0 flex の中で要素が縮まないようにする
flex-wrap 横並びの要素が入りきらないときに折り返せるようにする

今日分かったこと

max-w-sm でカードの横幅を制限し、mx-auto を使うことでカードを中央寄せにできました。

mt-6 や mt-3 を使うと、見出しとカードの間、作品情報とボタンの間に余白を付けられました。

flex-1 を使うことで、作品情報エリアが残りの幅を使いやすくなりました。

また、flex-shrink-0 や flex-wrap は見た目の変化は体感しにくいものの、画像サイズの安定やボタンの折り返しに備えるための指定として使えることが分かりました。

次回やること

シリーズ記事

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?