← クエスト一覧
クエスト2：ユーティリティクラスの基本（色・サイズ）
スライド
1
/
3
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌊 Tailwind CSS基礎
/
Quest 2
/ 10
クエスト2：ユーティリティクラスの基本（色・サイズ）
基礎
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
div に背景色・文字色・幅・高さのクラスを追加して、青いボックスと緑のボックスを作ろう！
📖 解説を見る
🎨 色とサイズをクラスで指定しよう
色クラスは
bg-blue-500
（背景色）・
text-red-600
（文字色）のように
プロパティ - 色名 - 濃さ（50〜950）
の形式です。
サイズは
w-32
（幅8rem）・
h-16
（高さ4rem）のように指定します。
ヒントを見る
bg-blue-500 text-white w-32 h-16 flex items-center justify-center rounded を追加しよう
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-50 p-6 font-sans"> <!-- 色とサイズのクラスを追加しよう！ --> <!-- div に bg-blue-500 text-white w-32 h-16 flex items-center justify-center rounded を付けよう --> <div> ボックス </div> <!-- もう1つ：bg-green-400 text-white w-40 h-12 flex items-center justify-center rounded --> <div> グリーン </div> </body> </html>
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 0 正解
レッスンに戻る
全問正解でクエストクリア！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
