CSS基礎 練習問題・過去問対策（全55問・解説付き）
CSSの基本要素と使い方を学ぶための問題です。すべての問題に正解と解説が付いています。アプリで解くと正解するたびにレーティングが上がり、実力の伸びが目に見えます。
- 問1. クラスセレクタを使ってHTMLのclassに対してスタイルを当てる場合、正しいCSSの書き方はどれですか？ ```htm…
- 問2. 要素に上下16px、左右24pxのパディングを設定したい場合、正しいCSSの書き方はどれですか？
- 問3. 複数のプロパティを組み合わせて、背景色を青、テキスト色を白に設定したい場合、正しいCSSの書き方はどれですか？
- 問4. 要素を横並びにしてアイテム間に16pxの間隔を持たせたい場合、正しいCSSの書き方はどれですか？
- 問5. ボタンのホバー時に背景色を濃くしたい場合、正しいCSSの書き方はどれですか？
- 問6. 要素のボーダー半径を8pxに設定して、角を丸くしたい場合、正しいCSSの書き方はどれですか？
- 問7. 画面幅が768px以上の時だけ、パディングを16pxから32pxに変更したい場合、正しいCSSの書き方はどれですか？
- 問8. 背景画像を表示し、コンテナに合わせてスケールして中央に配置したい場合、正しいCSSの書き方はどれですか？
- 問9. テキストのフォントサイズを18pxに設定したい場合、正しいCSSの書き方はどれですか？
- 問10. 3列のグリッドレイアウトを作り、各列に16pxの間隔を持たせたい場合、正しいCSSの書き方はどれですか？
- 問11. 要素のテキストを画面中央に水平方向で揃えたい場合、正しいCSSの書き方はどれか。
- 問12. 要素の外側に上下左右均等に20pxの余白（マージン）を設定したい場合、正しいCSSの書き方はどれか。
- 問13. 要素の文字色を16進数カラーコードで指定し、鮮やかな緑色（#00FF00）にしたい場合、正しいCSSの書き方はどれか。
- 問14. 要素の表示・非表示を切り替える際、要素をレイアウト上から完全に取り除いて非表示にしたい場合、正しいCSSの書き方はどれか…
- 問15. 要素の横幅を親要素の50%に設定したい場合、正しいCSSの書き方はどれか。
- 問16. テキストに下線を引きたい場合、正しいCSSの書き方はどれか。
- 問17. 要素の文字の太さを太字にしたい場合、正しいCSSの書き方はどれか。
- 問18. 要素に幅1px、色黒、実線のボーダー（枠線）を設定したい場合、正しいCSSの書き方はどれか。
- 問19. 要素の上に他の要素を重ねて表示させたい場合に使う、要素の重なり順を指定するCSSプロパティとして正しいものはどれか。
- 問20. 要素の文字の位置は変えずに、行の高さ（行間）を1.5倍に設定したい場合、正しいCSSの書き方はどれか。
- 問21. 要素の文字を大文字だけで表示したい（HTML上は小文字で記述していても画面上ではすべて大文字に変換して表示したい）場合、…
- 問22. 要素の外枠の内側に影（インセットシャドウ）ではなく、外側に薄いドロップシャドウ（影）をつけたい場合、正しいCSSの書き方…
- 問23. 要素をクリックしても選択されないよう、マウスでのテキスト選択（範囲選択）を禁止したい場合、正しいCSSの書き方はどれか。
- 問24. 要素の幅や高さを指定する際に、paddingやborderの太さを含めた合計サイズが指定した値になるようにしたい場合、正…
- 問25. 要素の位置指定方法として、親要素を基準に配置したい場合に、親要素側に指定すべきCSSの書き方として正しいものはどれか。
- 問26. 要素の透明度を50%にして半透明にしたい場合、正しいCSSの書き方はどれか。
- 問27. リストの箇条書きマーカー（黒丸や数字など）を非表示にしたい場合、正しいCSSの書き方はどれか。
- 問28. 同じ要素に対してCSSの詳細度（specificity）が同じ複数のルールが競合した場合の適用ルールとして、正しいものは…
- 問29. 縦横比を保ったまま画像の幅を親要素の100%に合わせて表示したい場合、正しいCSSの書き方はどれか。
- 問30. 要素を画面の中央（水平方向・垂直方向とも）に配置したい場合、Flexboxを使った正しいCSSの書き方はどれか。
- 問31. CSSで要素の高さを固定値ではなく、内容量に応じて自動的に調整させたい場合、正しい記述はどれか。
- 問32. CSSでテキストの単語間や文字間の間隔を調整するために、文字と文字の間の余白を広げたい場合、正しいプロパティはどれか。
- 問33. CSSアニメーションで要素の状態を滑らかに変化させたい場合に、プロパティの変化にかける時間を指定するために使う正しいプロ…
- 問34. HTML文書に外部CSSファイル（style.css）を読み込むための正しい記述はどれか。
- 問35. 複数のフォントを優先順位付きで指定し、最初のフォントが使用できない場合に次の候補を使うようにしたい場合、正しいCSSの書…
- 問36. 次のHTMLにおいて、id属性を持つdiv要素に対してスタイルを適用したい場合、正しいCSSセレクタの書き方はどれか。 …
- 問37. 親要素のフォントサイズの影響を受けず、常にルート要素（html要素）のフォントサイズを基準にサイズを指定したい場合、正し…
- 問38. 要素の内容が指定した領域からはみ出た場合に、はみ出た部分を非表示にしたい場合、正しいCSSの書き方はどれか。
- 問39. HTMLにおいて、特定の要素の「内側にある」すべての要素に対してスタイルを適用する「子孫セレクタ」の正しい書き方はどれか…
- 問40. 要素を画面上で見えなくする際、要素の領域（レイアウト上のスペース）はそのまま残しておきたい場合、正しいCSSの記述はどれ…
- 問41. CSSを使って要素の直前にアイコンなどのコンテンツを挿入できる疑似要素（::before）を使用する際、要素を生成するた…
- 問42. リンクではない特定の要素にマウスカーソルを合わせた際、クリックできることをユーザーに伝えるためにカーソルの形状を「指のマ…
- 問43. 背景として指定した小さな画像が、要素内で縦横に繰り返して表示（タイリング）されないようにし、1度だけ表示させたい場合、正…
- 問44. HTML内で改行せずに長く記述されたテキストについて、親要素の右端に到達しても自動で折り返さず、1行のまま水平に突き抜け…
- 問45. ページをスクロールした際、ある要素が画面の特定の位置（例えば上部）に到達した時点でそこに固定され、それ以上スクロールして…
- 問46. CSSで独自に名前を付けたカスタムプロパティ（CSS変数）を定義し、それを別の場所で呼び出して使用したい場合、正しいCS…
- 問47. HTML要素の特定の属性（例えば button要素の type="submit"）を持つ要素だけを対象にしてスタイルを適…
- 問48. リスト要素（liなど）が複数並んでいる中で、偶数番目の要素だけに背景色を付けたい場合、対象を絞り込むための正しいCSSの…
- 問49. とても長いURLや英単語が親要素の幅を超えてはみ出すのを防ぐため、単語の途中であっても強制的に改行させたい場合、正しいC…
- 問50. 画像などの要素に対して、画像編集ソフトを使わずにCSSのみで「ぼかし（ブラー）」効果をかけたい場合、正しいCSSの書き方…
- 問51. 画面幅が狭くなったときに画像が親要素からはみ出ないようにしたい。ただし、画像の本来のサイズ以上には無理に引き伸ばさないよ…
- 問52. 要素の背景色に黒を指定しつつ、背景色だけを50%の半透明にしたい場合（中のテキストは半透明にしない）、正しいCSSの書き…
- 問53. 要素の横幅を、親要素の幅（100%）から両端の余白分（合計40px）を引いたサイズに動的に設定したい場合、正しいCSSの…
- 問54. クラスに「active」が付いて「いない」すべてのbutton要素に対してスタイルを適用したい場合、正しいCSSセレクタ…
- 問55. 文字に対して、右方向に2px、下方向に2pxずらした黒色の影をつけたい場合、正しいCSSの書き方はどれか。