今回の課題

横並よこならびの2カラムを、幅はば500px以下いかでは縦並たてならびにしよう！

📖 解説を見る

📱 スマホでも見みやすくしよう！

@media を使つかうと、画面がめんサイズによってスタイルを変かえられます。

✏️ 書かき方かた：

/* 通常つうじょう（パソコン） */
.container { display: flex; }

/* 幅はばが600px以下いかのとき（スマホ） */
@media (max-width: 600px) {
  .container { display: block; }
}

⚠️ ポイント：
・max-width は「最大さいだい○px以下いかのとき」
・スマホ用ようのCSSは後あとに書かくと上書うわがきされる

ヒントを見る

@media (max-width: 500px) { .container { flex-direction: column; } } と書こう！

📄 見本

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

💻 コードエディタ

あなたの出力

🏠 ホームへ

れんしゅうもんだい

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

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

未挑戦

問題 1: 幅はばが400px以下いかのとき、文字もじサイズを小ちいさく（14px）にしよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 2: 幅はばが600px以下いかのとき、ナビバーを縦たてに積つみ上あげよう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

未挑戦

問題 3: 幅はばによって3列れつ→2列れつ→1列れつと変かわるグリッドを作つくろう！（自由じゆう回答かいとう）

🖼 プレビュー

実行結果

実行できたよ！

もう一度チャレンジ！

次のクエスト →

クエスト19：レスポンシブデザイン入門