← クエスト一覧
クエスト3：spacing（margin・padding）のクラス
スライド
1
/
3
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌊 Tailwind CSS基礎
/
Quest 3
/ 10
クエスト3：spacing（margin・padding）のクラス
基礎
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
カードの div に padding・shadow・角丸を追加して、整ったカードレイアウトを作ろう！
📖 解説を見る
📐 余白でレイアウトを整えよう
•
p-N
：内側の余白（padding）
•
m-N
：外側の余白（margin）
•
px-N
・
py-N
：左右・上下のみ
•
mb-N
・
mt-N
：下・上のみ
N の値は 0.25rem 単位：
p-4
= 1rem = 16px
ヒントを見る
外側div に bg-white shadow rounded-lg p-6 m-4 max-w-sm、h2 に text-xl font-bold mb-2 を付けよう
🤖 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"> <!-- spacingクラスを追加してカードを整えよう！ --> <!-- 外側divに bg-white shadow rounded-lg p-6 m-4 max-w-sm を付けよう --> <div> <!-- h2 に text-xl font-bold mb-2 を付けよう --> <h2>スペーシングの練習</h2> <!-- p に text-gray-600 mb-4 を付けよう --> <p>padding と margin で余白を作ろう。見やすいレイアウトの基本です。</p> <!-- button に bg-blue-500 text-white px-4 py-2 rounded を付けよう --> <button>詳しく見る</button> </div> </body> </html>
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 0 正解
レッスンに戻る
全問正解でクエストクリア！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
