目次
- はじめに
- 学習方針
- 学習環境
- 表示確認方法
- 学習用ディレクトリ構成
- 今日作るもの
- 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：学習で使用するディレクトリ構成を追記しました。