問題一覧に戻る
上級CSS基礎
問題59: コンテナクエリ
コンテナクエリを使ってコンテナサイズに応じたレスポンシブデザインを実装しましょう!
📝 タスク1: 1つ目の___にcontainer-type: inline-sizeを入れてコンテナを定義
📝 タスク2: 2つ目の___に@container (min-width: 500px)を入れて大きなコンテナ用の条件を設定
📝 タスク3: 3つ目の___にgap: 2remを入れてフレックス要素間の間隔を設定
📝 タスク4: 4つ目の___に@container (max-width: 499px)を入れて小さなコンテナ用の条件を設定
📝 タスク5: 5つ目の___にfont-size: 0.9remを入れて文字サイズを設定
HTML(読み取り専用)
CSS コードエディタ
リアルタイムプレビュー