CSSレイアウトを「暗記」ではなく「配置」で覚える
FlexboxやCSS Gridは便利ですが、justify-content、align-items、grid-template-columnsなど似た名前のプロパティが多く、最初は覚えにくい分野です。LAYOUT PUZZLEは、完成見本と同じ配置をCSSで再現するパズル型の学習ツールです。
パズルの進め方
指定されたカードやボックスの配置を見ながら、使うプロパティを選択します。変更結果はその場で反映され、正しい配置になればクリアとなる流れを想定しています。
学べるテーマ
- Flexboxの横並び・縦並び
- justify-contentとalign-items
- gapと折り返し
- CSS Gridの列・行設定
- レスポンシブな配置の考え方
CSS VISUAL BUILDERとの違い
CSS VISUAL BUILDERは自由にデザインを作ってCSSを生成する制作支援ツールです。LAYOUT PUZZLEは完成条件がある課題を解きながら、レイアウト用プロパティを身につける学習体験に特化します。
想定ユーザー
FlexboxやGridの基本を覚えたい人、チュートリアルを読んでも実際の使い分けが分かりにくい人を対象にします。
研究ステータス
現在はNEXT EXPERIMENTS段階です。Flexbox編とGrid編の分け方、スマートフォンでの操作性、正解判定の分かりやすさを検討します。