← クエスト一覧
クエスト4：flexboxのユーティリティクラス
スライド
1
/
3
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌊 Tailwind CSS基礎
/
Quest 4
/ 10
クエスト4：flexboxのユーティリティクラス
基礎
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
div に flex クラスを追加して横並び中央揃えを実現し、もう1つの div を flex-col で縦並びにしよう！
📖 解説を見る
↔️ Flexbox で自由にレイアウトしよう
•
flex
：横並びにする
•
justify-center
：横方向の中央揃え
•
items-center
：縦方向の中央揃え
•
flex-col
：縦並びにする
•
gap-N
：子要素間の隙間
ヒントを見る
flex justify-center items-center gap-4 h-20 bg-gray-100 rounded を付けよう。縦並びは flex flex-col gap-3
🤖 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"> <!-- Flexboxクラスを追加してレイアウトを整えよう！ --> <!-- ① 横並び・中央揃えにしよう（flex justify-center items-center gap-4 h-20 bg-gray-100 rounded） --> <div> <div class="bg-blue-200 p-4 rounded">アイテム1</div> <div class="bg-green-200 p-4 rounded">アイテム2</div> <div class="bg-red-200 p-4 rounded">アイテム3</div> </div> <!-- ② 縦並びにしよう（flex flex-col gap-3 mt-4） --> <div> <div class="bg-purple-200 p-3 rounded">縦A</div> <div class="bg-purple-200 p-3 rounded">縦B</div> </div> </body> </html>
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 0 正解
レッスンに戻る
全問正解でクエストクリア！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
