← クエスト一覧

クエスト35：レスポンシブなカード

スライド 1 / 2

コーデ

💻 コード例

実行結果

今回の課題

大画面は3列、小画面（600px以下）は1列のカードレイアウトを作ろう！

📖 解説を見る

🃏 レスポンシブなカードレイアウト！

Flexbox とメディアクエリを組み合わせて、画面サイズに応じてカードの列数を変えよう！

ヒントを見る

デフォルトで flex + flex-wrap: wrap、小画面で flex-direction: column にしよう！

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

あなたの出力

次へ →

🏠 ホームへ

れんしゅうもんだい

☑ 0 / 3 正解レッスンに戻る

全問正解でクエストクリア！

未挑戦

問題 1: カードの背景色を好きな色に変えよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: カードにホバー効果（影）を追加しよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: カードを4枚に増やしてみよう！（自由回答）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

コピーしました！