色・余白・ボックスモデルからFlexbox・Grid・メディアクエリまで、CSSの基礎を24問の練習問題で身につけられる無料アプリです。問題ごとにHTMLが用意されているので、あなたはCSSを書くことだけに集中できます。書いたCSSはその場でプレビューに反映され、プレビュー幅をPC／SPで切り替えるとメディアクエリや clamp() の効き目も確認できます。じっくり解説を読みたい方は記事版「CSS初心者向け練習問題」へ。
style.css — 上のHTMLに対してCSSを書きます
このアプリについて
- 色・文字・余白・ボックスモデル・セレクタから、Flexbox・Grid・position・メディアクエリ・CSS変数まで、CSSの基礎を24問で総ざらいできます
- Q1〜Q5は記事版と同じ問題、Q6〜Q24はアプリ限定ドリル（padding と margin の違い / box-sizing / 疑似クラス / flex-wrap / grid-template-areas / z-index / transition / var() / clamp() など）です
- 問題ごとにHTMLが用意されているので、CSSを書くことだけに集中できます。入力すると下のプレビューへ自動で反映され、「お手本」タブで解答例の表示と見比べられます（登録・インストール不要）
- プレビュー幅をPC／SP 375pxで切り替えられます。プレビューは独立したビューポートなので、メディアクエリや
clamp() が実際に切り替わるところをその場で確認できます
- 「✓できた / △あとで復習」の自己判定はこの端末に自動保存され、復習リストだけを解き直せます
各問題の詳しい解説は、記事版「CSS初心者向け練習問題｜プロパティの基礎から簡単なレイアウト作成まで」にまとめています。HTMLから学びたい方はHTML基礎練習アプリ（20問）もどうぞ。