目次

はじめに
学習方針
学習環境
表示確認方法
学習用ディレクトリ構成
今日作るもの
STEP1：HTMLファイルを作る
STEP2：Tailwind CSSをCDNで読み込む
STEP3：見出しを作る
STEP4：文字を中央寄せにする
STEP5：文字サイズを大きくする
STEP6：背景を濃いグレーにする
STEP7：文字色を白にする
STEP8：内側余白を付ける
完成コード
使ったTailwind CSSのclass
表示確認
今日分かったこと
次回やること
更新履歴

はじめに

Tailwind CSS の基本的な class を、1つずつ確認しながら管理画面風の見出しを作成しました。

今回は既存アプリのソースは使わず、学習用の独立したHTMLファイルで進めています。

学習方針

Bootstrapは使用しない
Tailwind CSSをCDNで読み込む
既存アプリのソースは使わない
各Dayごとに表示確認しながら進める
最終的に管理画面風のカード一覧UIを作る

学習環境

今回は学習用として、CDNを使用しました。

<script src="https://cdn.tailwindcss.com"></script>

Laravelなどの実プロジェクトではVite経由でTailwind CSSを利用するのが基本ですが、classの動きを確認する学習段階ではCDNでも確認しやすいです。

表示確認方法

作成したHTMLファイルは、ブラウザで表示確認しながら進めます。

VSCodeを使用している場合は、拡張機能の Live Server を使うと簡単に確認できます。

UbuntuなどのLinux環境で確認する場合は、学習用ディレクトリに移動して、以下のコマンドで簡易サーバーを起動できます。

python3 -m http.server 8000

起動後、ブラウザで以下にアクセスします。

http://localhost:8000

HTMLファイルを直接開く方法でも確認できますが、画像ファイルなどを扱う場合は、簡易サーバー経由で確認した方が実際の表示に近くなります。

学習用ディレクトリ構成

今回の学習では、DayごとにHTMLファイルを分けて作成します。

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
└── images/
    └── sample-poster.png

Day3以降で画像を使うため、画像ファイルは images/ フォルダに配置します。

今日作るもの

Tailwind CSSで、管理者ダッシュボード風の見出しを作成します。

STEP1：HTMLファイルを作る

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

day01-heading.html

STEP2：Tailwind CSSをCDNで読み込む

学習用として、Tailwind CSSをCDNで読み込みます。

<script src="https://cdn.tailwindcss.com"></script>

STEP3：見出しを作る

body の中に、管理画面の見出しになる h1 を追加します。

<h1>
    Admin Dashboard
</h1>

STEP4：文字を中央寄せにする

見出しの文字を中央寄せにするため、text-center を追加します。

<h1 class="text-center">
    Admin Dashboard
</h1>

STEP5：文字サイズを大きくする

見出しらしくするため、text-xl を追加します。

<h1 class="text-center text-xl">
    Admin Dashboard
</h1>

STEP6：背景を濃いグレーにする

管理画面のヘッダーらしくするため、bg-gray-900 を追加します。

<h1 class="text-center text-xl bg-gray-900">
    Admin Dashboard
</h1>

STEP7：文字色を白にする

濃い背景でも文字が読みやすいように、text-white を追加します。

<h1 class="text-center text-xl bg-gray-900 text-white">
    Admin Dashboard
</h1>

STEP8：内側余白を付ける

見出しの内側に余白を付けるため、p-4 を追加します。

<h1 class="text-center text-xl bg-gray-900 text-white p-4">
    Admin Dashboard
</h1>

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day 1 管理画面見出し</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <h1 class="text-center text-xl bg-gray-900 text-white p-4">
        Admin Dashboard
    </h1>
</body>
</html>

使ったTailwind CSSのclass

class	内容
`text-center`	文字を中央寄せにする
`text-xl`	文字サイズを大きくする
`bg-gray-900`	背景を濃いグレーにする
`text-white`	文字色を白にする
`p-4`	内側に余白を付ける

表示確認

見出しが中央寄せになった
背景が濃いグレーになった
文字色が白になった
見出しの上下左右に余白が付いた

以下のようにブラウザで表示確認できました。

今日分かったこと

bg-gray-900 のような濃い背景色を使う場合は、text-white で文字色を白にすると読みやすくなることが分かりました。

また、p-4 を付けるだけで見出しの内側に余白ができ、管理画面らしい見た目に近づきました。

次回やること

【Tailwind CSS入門 Day2】カードUIの土台を作る

更新履歴

更新履歴

2026-05-13：HTMLファイルの表示確認方法を追記しました。
2026-05-12：Day2以降の記事構成に合わせて、作成手順をSTEP形式で追記しました。
2026-05-12：学習で使用するディレクトリ構成を追記しました。