BOX MODELを「見て覚える」から「動かして理解する」へ
CSSを学び始めたときにつまずきやすいのが、margin・padding・border・width・heightの関係です。BOX MODEL QUESTは、数値を読むだけではなく、画面上の要素を実際に変化させながらCSSの余白構造を理解するためのWEB LAB実験です。
どんな体験を目指すか
「指定された見た目に近づける」「余白のズレを直す」「どの値を変更すべきか当てる」といった短いミッションを解きながら、ボックスモデルの役割を自然に覚えられる構成を想定しています。
学べるテーマ
- marginとpaddingの違い
- borderを含めた要素サイズの考え方
- width / heightと余白の関係
- 隣接要素との距離の見方
- 余白を調整したときのレイアウト変化
想定ユーザー
HTML/CSSを勉強し始めた初心者や、marginとpaddingを何となく使っているものの、違いを感覚的に整理したい人を主な対象にします。
既存WEB LABとの違い
CODE LAB : HTML & CSSがHTML/CSSを広く学ぶ実践環境なのに対し、この実験はBOX MODELだけにテーマを絞り、短時間で反復できるゲーム感覚の学習体験を目指します。
研究ステータス
現在はNEXT EXPERIMENTS段階です。ゲーム性と学習効果のバランス、スマートフォンでも操作しやすいUI、問題の難易度設計を検討します。