レベル1: 初級編
HTML/CSSの基本的な概念でつまずきやすいポイントを学習します
Flexbox
要素の配置とalign-items、justify-contentの使い方
5問Grid
グリッドレイアウトの基本と配置の仕組み
5問Position
relative、absolute、fixedの違いと使い方
5問Display
block、inline、inline-blockの特性
5問Margin
マージンの相殺と中央寄せのテクニック
5問Padding
パディングとボックスモデルの関係
5問Width/Height
幅と高さの指定、%とvw/vhの違い
5問Text/Font
テキスト配置とフォントサイズの単位
5問Z-index
重なり順序とスタッキングコンテキスト
5問Background
背景画像のサイズと配置の制御
5問レベル2: 中級編
より実践的な問題と複雑なレイアウトパターンを学習します
Flexbox 応用
複雑なレイアウトとレスポンシブ対応
5問Grid 応用
複雑なグリッドレイアウトとエリア定義
5問Position 応用
stickyポジションと複雑な配置パターン
5問Display 応用
flexとgridの組み合わせ、display: contents
5問Margin 応用
負のマージンと高度なレイアウトテクニック
5問Padding 応用
アスペクト比の維持とレスポンシブパディング
5問Width/Height 応用
min/max制約とcalc()関数の活用
5問Text/Font 応用
可変フォント、clamp()、テキストオーバーフロー
5問Z-index 応用
複雑なスタッキングコンテキストの管理
5問Background 応用
複数背景、グラデーション、ブレンドモード
5問