CSS練習問題｜初心者向け無料ドリル30問

CSS練習問題で実力を確認しよう

「CSSを学んだけど身についているか不安」「実践力を確認したい」——そんな方のために、CSS練習問題を初心者向けに30問用意しました。

セレクタ・ボックスモデル・Flexbox・レスポンシブデザインなど、CSSコースで学ぶ内容を網羅しています。選択式・入力式・穴埋め式の3タイプで、「わかったつもり」を防ぎます。まずはこの記事でサンプル5問に挑戦し、全30問はCSSドリルページで解いてみましょう。

CSSは「読めばわかる」けど「書こうとすると手が止まる」ことが多い言語です。練習問題を繰り返し解くことで、「考えなくても手が動く」レベルまで知識を定着させましょう。

レベル別学習ガイド

• 初級（Q1〜Q10）：色・フォント・余白の問題 → CSS基礎を復習。CSSの基本構文やプロパティ名を覚えているか確認しましょう。
• 中級（Q11〜Q20）：ボックスモデル・Flexboxの問題 → Flexbox・Gridを復習。レイアウトの仕組みを理解しているか確認しましょう。
• 上級（Q21〜Q30）：レスポンシブ・アニメーション・擬似要素の問題。実践的なCSSの知識が問われます。

自分のレベルに合ったところから始めましょう。初級で8割以上正解できたら中級に進んでOKです。

サンプル問題（5問）

Q1. CSSの基本構文（選択式）

Q2. クラスセレクタ（選択式）

Q3. 文字色のプロパティ（入力式）

Q4. ボックスモデルの4層（選択式）

Q5. Flexboxの指定先（選択式）

💡 CSSでフォントを変える方法で基礎を確認できます。

全30問に挑戦しよう

上の5問は、CSSドリル全30問のほんの一部です。ドリルでは以下のカテゴリを網羅しています。

• CSSの基本（Q1〜5）：セレクタ・プロパティ・値の書き方
• 文字のスタイル（Q6〜10）：color・font-size・font-weight・text-align
• 背景と枠線（Q11〜15）：background-color・border・border-radius
• ボックスモデル（Q16〜20）：margin・padding・box-sizing・幅の計算
• Flexbox（Q21〜25）：display:flex・justify-content・align-items
• レスポンシブ（Q26〜30）：@media・viewport・スマホファースト

正解数がリアルタイムで表示されるので、自分の理解度がひと目でわかります。全問正解を目指して繰り返し挑戦しましょう。

🔗 あわせてCSSレッスン1もチェックしてみましょう。

効果的な復習方法

• 間違えた問題をメモする：間違えた問題番号と「なぜ間違えたか」をメモしておくと、復習が効率的になります。
• 翌日に解き直す：記憶は睡眠中に定着します。翌日に解き直すと、前日より正解率が上がっているはずです。
• 実際にコードを書いて確認する：問題の答えがわかったら、ブラウザの開発者ツールで実際にCSSを書いて動作を確認しましょう。

問題を解くコツ

• まず完成イメージを確認する：どんな見た目にしたいのかを明確にしてから書き始めましょう。開発者ツールで既存のサイトのCSSを観察するのも勉強になります。
• 使うプロパティを予想してから書く：「横並びにしたい→flexかな」「余白を空けたい→marginかpaddingかな」と考えてから書くと、正解率が上がります。
• 開発者ツールで確認しながら進める：ブラウザのF12キーで開発者ツールを開き、リアルタイムでCSSを変更して結果を確認できます。試行錯誤が簡単にできるので、積極的に活用しましょう。
• 1つずつプロパティを追加する：一度に複数のプロパティを書くと、どれが効いているかわからなくなります。1つ追加→確認→次を追加、の流れで進めましょう。

📖 CSSセレクタの種類を復習しておくと正答率が上がります。

間違えやすいポイント

• margin と padding の混同 — marginは要素の外側の余白、paddingは要素の内側の余白です。「箱の外か中か」で覚えましょう。marginとpaddingの違いで詳しく解説しています。
• Flexboxの軸方向の間違い — justify-content は主軸（横方向）、align-items は交差軸（縦方向）の配置を制御します。flex-direction: column にすると軸が入れ替わるので注意。
• セレクタの詳細度による上書き — idセレクタ（#）はclassセレクタ（.）より優先されます。「スタイルが効かない」と思ったら、より詳細度の高いセレクタが上書きしていないか確認しましょう。
• box-sizingの罠 — デフォルトでは width にpaddingとborderが含まれません。box-sizing: border-box を指定すると、paddingとborderを含めた幅になります。

🔗 レスポンシブデザインの問題も多いので復習しておきましょう。

次のステップ

問題を解いたら実際のページを作ってみましょう。模写コーディングに挑戦すると実践力がさらに伸びます。既存のWebサイトを見ながら同じデザインを再現する練習で、「どのプロパティを使えばこの見た目になるか」を体で覚えられます。

ドリルで基礎を固めたら、以下の順番でステップアップしましょう。

1. CSSドリルで全問正解を目指す
2. 模写コーディングで実践力をつける
3. オリジナルのページを作ってGitHub Pagesで公開する

まとめ

ドリルで知識を確認したら、実践チャレンジで実際に作品を作ってみましょう。CSSは「知っている」と「使える」の間に大きな差があります。問題を解くときは、必ず「なぜその答えになるのか」を考えましょう。理由がわかれば、似た問題にも応用できます。CSSは暗記科目ではなく、「仕組みを理解する」科目です。ボックスモデルの仕組み、Flexboxの軸の概念、セレクタの詳細度のルール——これらの「なぜ」を理解すれば、どんなレイアウトでも自力で組めるようになります。ドリルで基礎を固めて、模写コーディングで実践力を磨きましょう。CSSは書けば書くほど上達する言語です。毎日少しずつでも書き続けることが、上達への最短ルートです。このドリルを全問正解できたら、あなたのCSS基礎力は十分です。自信を持って次のステップに進みましょう。実践チャレンジでオリジナル作品を作ってみてください。CSSの力を使って、あなただけのデザインを形にしましょう。世界に一つだけのWebサイトを作ってみてください。あなたのセンスが光る作品を期待しています。ドリルで知識を確認し、模写コーディングで実践力を磨き、オリジナル作品で応用力をつける——この3ステップで確実にCSS力が伸びます。