[ペチパーの大冒険] ゲーム制作#26「ミスしがちなCSSクイズ（簡単編）」

前回HTMLの簡単間違いクイズを作ってので、今度はCSS版を作ってみました。 仕事でたま〜にやっちゃう経験から、以外と思い当たる人も多いかもしれないので、役にたつかもね。

1. セレクタの指定がうまくいかない！？

.button { background-color: blue; color white; padding: 10px; }

Q. どこが間違っているでしょう？

1. background-color の指定が古い
2. color プロパティの記述が間違っている
3. padding に単位が必要
4. セレクタ .button が不正

正解

正解を見る。[クリック]

2. 指定が効かない！？

p { font-size: 16px; margin :0 }

Q. このスタイルがうまく効かない理由は？

1. font-size の値が小さすぎる
2. margin に単位がない
3. コロンの代わりにカンマを使っている
4. margin にセミコロン : が抜けている

正解

正解を見る。[クリック]

3. 色が反映されない！？

h1 { color: #fff; background-color: rgb(256, 0, 0); }

Q. 正しく表示されない理由は？

1. #fff は省略形で使えない
2. rgb() の値が範囲外
3. color と background-color は同時に使えない
4. h1 セレクタはHTML5で非推奨

正解

正解を見る。[クリック]

4. フォントが変わらない！？

body { font-family: Arial, sans serif; }

Q. フォントが正しく適用されない理由は？

1. Arial は存在しないフォント
2. font-family にスペースがある
3. sans serif の記述方法が間違っている
4. body セレクタは全体に適用されない

正解

正解を見る。[クリック]

CSSでよくまちがえる基礎ポイントまとめ

• :（コロン）や;（セミコロン）忘れは定番のミス
• 値の範囲（rgbやopacityなど）にも注意
• プロパティの正しいスペル・書式は意外と落とし穴
• ショートハンド記法の使い方にも注意

あとがき

CSSのミスは、デバッグができない上、CICDでの確認がほぼできないので、勘と経験でミスを見つけなければいけません。 これまで、何万行も書いてきたCSSですが、いまだに今回のような凡ミスをやっちゃいます。 でも、Web制作は楽しいのでめげずに仕事中でも間違い探しに勤しんでいます。 これをめんどくさいと思わずに、間違い探しゲームと思って、みんなも楽しみましょう。