← クエスト一覧
クエスト5：レスポンシブデザインのクラス
スライド
1
/
3
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌊 Tailwind CSS基礎
/
Quest 5
/ 10
クエスト5：レスポンシブデザインのクラス
応用
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
h1 にレスポンシブなテキストサイズを設定し、div の方向を md: で切り替えよう！
📖 解説を見る
📱 モバイル・タブレット・PC に対応しよう
Tailwind は
モバイルファースト
設計です。
• プレフィックスなし → 全サイズ共通
•
sm:
→ 640px 以上で適用
•
md:
→ 768px 以上で適用
•
lg:
→ 1024px 以上で適用
ヒントを見る
text-lg md:text-2xl lg:text-4xl font-bold text-center p-4 を付けよう。縦横切り替えは flex flex-col md:flex-row gap-4
🤖 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"> <!-- レスポンシブクラスを追加しよう！ --> <!-- Tailwindはモバイルファーストです --> <!-- sm: = 640px以上 / md: = 768px以上 / lg: = 1024px以上 --> <!-- ① テキストサイズをレスポンシブに：text-lg md:text-2xl lg:text-4xl font-bold text-center p-4 --> <h1>レスポンシブテキスト</h1> <!-- ② レイアウトをレスポンシブに：flex flex-col md:flex-row gap-4 mt-6 --> <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> </body> </html>
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 0 正解
レッスンに戻る
全問正解でクエストクリア！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
