目次
- はじめに
- シリーズ記事
- 今日作るもの
- STEP1：Day3用HTMLファイルを作る
- STEP2：タイトルをDay3用に直す
- STEP3：カード内を2つのエリアに分ける
- STEP4：カード内を横並びにする
- STEP5：画像エリアと作品情報エリアの間隔を空ける
- STEP6：画像エリアの幅を固定する
- STEP7：画像エリアの高さを固定する
- STEP8：画像エリアを角丸にする
- STEP9：画像エリアを画像タグに変更する
- STEP10：画像の表示崩れを防ぐ
- STEP11：作品情報エリアに仮テキストを入れる
- 完成コード
- 使ったTailwind CSSのclass
- 表示確認
- 今日分かったこと
- 次回やること
はじめに
この記事は、Tailwind CSSを使って管理画面UIを1ステップずつ作る学習記録です。
Day3では、Day2で作ったカードの中に、サムネイル画像エリアと作品情報エリアを作ります。
シリーズ記事
- 【Tailwind CSS入門 Day1】管理画面の見出しを作る
- 【Tailwind CSS入門 Day2】カードUIの土台を作る
- 【Tailwind CSS入門 Day3】画像付きカードを作る ← 今回
今日作るもの
Day3では、Day2で作ったカードの中に、サムネイル画像エリアと作品情報エリアを作ります。
今日のゴールは、まだ完成カードではなく、まずはこの形です。
左：画像エリア
右：作品情報エリア
今日は 横並びレイアウト が中心です。
STEP1：Day3用HTMLファイルを作る
まず、Day3用のHTMLファイルを作成します。
day03-image-card.html
Day2のファイルをコピーして作る形でOKです。
tailwind-learning/
├── day01-heading.html
├── day02-card-base.html
└── day03-image-card.html
STEP2：タイトルをDay3用に直す
Day3は「画像付きカード」を作る日なので、title をDay3用に変更します。
修正前の例
<title>Day 2 カードUIの土台</title>
修正後
<title>Day 3 画像付きカード</title>
STEP3：カード内を2つのエリアに分ける
Day3では、カードの中を次の2つに分けます。
左：画像エリア
右：作品情報エリア
修正前
<div class="bg-white border rounded-lg shadow-sm p-4">
カードUIの土台
</div>
修正後
<div class="bg-white border rounded-lg shadow-sm p-4">
<div>
画像エリア
</div>
<div>
作品情報エリア
</div>
</div>
このSTEPでは、まだ横並びにはしません。
まずは、カードの中に 画像エリア と 作品情報エリア を作るだけです。
STEP4：カード内を横並びにする
今は、画像エリアと作品情報エリアが縦に並んでいる状態です。
次は、カードの div に flex を追加して、カード内を横並びにします。
修正前
<div class="bg-white border rounded-lg shadow-sm p-4">
<div>
画像エリア
</div>
<div>
作品情報エリア
</div>
</div>
修正後
<div class="bg-white border rounded-lg shadow-sm p-4 flex">
<div>
画像エリア
</div>
<div>
作品情報エリア
</div>
</div>
flex は、子要素を横並びにするためのclassです。
今回だと、
画像エリア 作品情報エリア
のように横並びになります。
STEP5：画像エリアと作品情報エリアの間隔を空ける
今は flex で横並びになっていますが、画像エリアと作品情報エリアの間隔が近い状態です。
次は、カードの div に gap-4 を追加します。
修正前
<div class="bg-white border rounded-lg shadow-sm p-4 flex">
<div>
画像エリア
</div>
<div>
作品情報エリア
</div>
</div>
修正後
<div class="bg-white border rounded-lg shadow-sm p-4 flex gap-4">
<div>
画像エリア
</div>
<div>
作品情報エリア
</div>
</div>
gap-4 は、flex で並べた子要素同士の間隔を空けるclassです。
今回だと、
画像エリア 作品情報エリア
の間に余白ができます。
STEP6：画像エリアの幅を固定する
次は、左側の 画像エリア に幅を指定します。
修正前
<div>
画像エリア
</div>
修正後
<div class="w-20">
画像エリア
</div>
w-20 は、要素の幅を固定するclassです。
今回は左側の画像エリアを一定幅にして、右側の作品情報エリアと分けて見えるようにします。
STEP7：画像エリアの高さを固定する
次は、左側の 画像エリア に高さを指定します。
修正前
<div class="w-20">
画像エリア
</div>
修正後
<div class="w-20 h-28">
画像エリア
</div>
h-28 は、要素の高さを固定するclassです。
これで、画像エリアが縦長のサムネイル枠に近い形になります。
STEP8：画像エリアを角丸にする
次は、左側の 画像エリア に rounded-md を追加します。
修正前
<div class="w-20 h-28">
画像エリア
</div>
修正後
<div class="w-20 h-28 rounded-md">
画像エリア
</div>
rounded-md は、要素の角を少し丸くするclassです。
ただし、今はまだ画像ではなく文字だけなので、変化は分かりにくい可能性があります。
この後、画像または背景色を入れると角丸が分かりやすくなります。
STEP9：画像エリアを画像タグに変更する
今は左側がまだ文字の 画像エリア なので、ここを実際の画像表示に変えます。
まず、学習用フォルダに画像を1枚用意します。
おすすめの配置はこれです。
tailwind-learning/
├── day03-image-card.html
└── images/
└── sample-poster.png
画像名は、今回は分かりやすく以下で進めます。
images/sample-poster.png
次に、左側の div を img に変更します。
修正前
<div class="w-20 h-28 rounded-md">
画像エリア
</div>
修正後
<img
src="images/sample-poster.png"
alt="サンプル画像"
class="w-20 h-28 rounded-md"
>
このSTEPでは、まだ object-cover は付けません。
まずは、画像が表示されるか確認します。
STEP10：画像の表示崩れを防ぐ
次は、画像に object-cover を追加します。
修正前
<img
src="images/sample-poster.png"
alt="サンプル画像"
class="w-20 h-28 rounded-md"
>
修正後
<img
src="images/sample-poster.png"
alt="サンプル画像"
class="w-20 h-28 object-cover rounded-md"
>
object-cover は、指定した幅と高さに合わせて画像をトリミングして表示するclassです。
画像の縦横比が枠と合わない場合でも、枠いっぱいに自然に表示しやすくなります。
STEP11：作品情報エリアに仮テキストを入れる
次は、右側の 作品情報エリア を少し分かりやすくします。
今はおそらくこうなっています。
<div>
作品情報エリア
</div>
これを、仮の作品情報に変更します。
<div>
<p>作品タイトル</p>
<p>作品情報エリア</p>
</div>
このSTEPでは、まだ文字サイズや色は整えません。
Day4で text-lg や font-bold などを使って文字を整えます。
今回は、画像の右側に作品情報が表示されること だけ確認します。
完成コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day 3 画像付きカード</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>作品タイトル</p>
<p>作品情報エリア</p>
</div>
</div>
</body>
</html>
使ったTailwind CSSのclass
| class | 内容 |
|---|---|
flex |
子要素を横並びにする |
gap-4 |
flex で並べた子要素同士の間隔を空ける |
w-20 |
要素の幅を固定する |
h-28 |
要素の高さを固定する |
rounded-md |
要素の角を少し丸くする |
object-cover |
指定した幅と高さに合わせて画像をトリミングして表示する |
表示確認
以下の点をブラウザで確認しました。
- 画像と作品情報が横並びになっている
- 画像と作品情報の間に余白がある
- 画像の幅が固定されている
- 画像の高さが固定されている
- 画像が枠に合わせて表示されている
今日分かったこと
flex を使うと、カード内の画像エリアと作品情報エリアを横並びにできることが分かりました。
gap-4 を追加すると、横並びにした要素同士の間隔を簡単に空けられました。
また、画像に w-20 と h-28 を指定することで、サムネイルの表示サイズを固定できました。
object-cover を使うと、指定した幅と高さに合わせて画像を自然に表示しやすくなることも確認できました。