受験勉強をしたことある方は歴史や化学などで、一問一答形式の参考書を見たことはないでしょうか？
そこで思いついたのが、CSSで一問一問。
今回は20題作成したいと思います。
以下に、CSSに関する問題とその答えを出していきます。基本から応用までの問題を混ぜていますので、CSSの知識を確認してみてください！
問題 1: CSSで文字の色を赤にするにはどうすれば良いですか？
答え:
color: red;
問題 2: 要素の背景色を青にするCSSプロパティは何ですか？
答え:
background-color: blue;
問題 3: 文字を太字にするためのCSSプロパティは何ですか？
答え:
font-weight: bold;
問題 4: クラス名が header の要素に対して、文字サイズを20ピクセルに設定するCSSは？
答え:
.header {
font-size: 20px;
}
問題 5: CSSでボックスの幅を100ピクセル、高さを200ピクセルに設定するには？
答え:
width: 100px;
height: 200px;
問題 6: CSSで margin を上下20px、左右10px に設定するにはどうしますか？
答え:
margin: 20px 10px;
問題 7: display プロパティの block と inline の違いは何ですか？
答え:
block は要素が新しい行に表示され、幅は親要素に合わせて広がります。
inline は要素が同じ行に並び、幅は内容のみに合わせられます。
問題 8: 特定のID名 content を持つ要素にスタイルを適用するためのCSSセレクタは？
答え:
#content {
/* スタイルをここに記述 */
}
問題 9: フォントサイズをレスポンシブにするための単位として一般的に使用されるのは何ですか？ px 以外の単位で答えてください。
答え: rem または em
問題 10: 以下のCSSで要素の背景色は何色になりますか？
body {
background-color: yellow;
}
#container {
background-color: blue;
}
.container {
background-color: green;
}
答え: #container の背景色は blue になります（IDセレクタ #container の方が優先されるため）。
問題 11: padding と margin の違いを説明してください。
答え:
padding はコンテンツとボーダーの間のスペースを調整します。
margin は要素の外側のスペースを調整し、隣接する要素との距離を制御します。
問題 12: CSSの position: absolute; の役割を説明してください。
答え: position: absolute; は、親要素の相対位置に基づいて要素を絶対位置に配置します。親要素が position: relative; や position: absolute;、position: fixed; でない場合、ページ全体（body）に対して配置されます。
問題 13: フレックスボックスを使って、要素を中央揃えにするCSSを答えてください。
答え:
.container {
display: flex;
justify-content: center;
align-items: center;
}
問題 14: @media クエリを使って、画面幅が600px以下の場合にテキストサイズを15pxにするCSSを記述してください。
答え:
@media (max-width: 600px) {
body {
font-size: 15px;
}
}
問題 15: 以下のコードで .box クラスの margin は何ピクセルになりますか？
コードをコピーする
.box {
margin: 10px 20px;
}
答え: 上下 10px、左右 20px になります。
問題 16: CSSでリンクのホバー時に文字色を赤にするコードを記述してください。
答え:
a:hover {
color: red;
}
問題 17: display: flex; と display: grid; の違いを簡潔に説明してください。
答え:
flex は一方向（横か縦）にアイテムを並べるためのレイアウトで、主に1次元のレイアウトに向いています。
grid は行と列の両方でアイテムを並べることができるため、2次元のレイアウトに向いています。
問題 18: overflow: hidden; の役割を説明してください。
答え: overflow: hidden; は、要素の中身が要素のサイズを超えたときに、その超過分を隠すプロパティです。
問題 19: CSSでフォントを「Roboto」に設定するにはどうすればいいですか？
答え:
font-family: 'Roboto', sans-serif;
問題 20: z-index の役割を簡単に説明してください。
答え: z-index は要素の重なり順を設定するプロパティで、値が大きいほど上に表示されます。
最後までよんでいただきありがとうございます。
毎日更新していますので、@y-t0910をフォロー,いいねしていただけると嬉しいです！