[ペチパーの大冒険] ゲーム制作#28「CSS 間違い探しクイズ（中級編1）」

CSSになれると、表示系に強くなれます。 イラストアプリで自由に好きなイラストを描くのと同じように、ホームページ上に思った通りのデザインが構築できるようになります。 アニメーションからレスポンシブデザインまで、Webサイトでは欠かす事ができない技術でもあるCSSをあまり詳しくない人は多いようなので、 簡単クイズで少しでも詳しくなれるようにしてみましょう。

問題1：クラスセレクタが効かない？

[html] <div class="box" style="color: blue;"></div> [css] .box { color: red; }

Q. 上記の場合、<div> の文字色はどうなる？

1. 赤になる
2. 青になる
3. 黒のまま
4. ブラウザによって変わる

正解

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

問題2：marginが効かない？

[css] .container { margin: 0 auto; width: 100%; }

Q. このCSSが効かない原因として最も考えられるのは？

1. margin に数値がない
2. width が100%だと中央寄せできない
3. auto はブロック要素には効かない
4. container クラスがdiv以外に使われている

正解

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

問題3：子要素のフォントが変わらない？

[css] .parent { font-size: 16px; } .child { font-size: 1em; }

Q. このとき、.child のフォントサイズはどうなる？

1. 16px
2. ブラウザのデフォルトサイズ
3. 計算不能で無効になる
4. .child に font-size が設定されていないことになる

正解

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

問題4：背景画像が全体に表示されない？

[css] .banner { background-image: url("bg.jpg"); background-size: cover; }

Q. 以下のどれかが抜けていて背景が表示されないかも？

1. height の指定
2. background-color
3. display: block
4. background-repeat の指定

正解

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

問題5：セレクタの優先順位が想定と違う？

[css] #main .title { color: blue; } .title { color: red; }

Q. .title の文字色はどうなる？

1. 赤
2. 青
3. 継承される
4. エラーになる

正解

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

あとがき

cssを難解と感じる人は、おそらくセレクタの優先順位が理解できていない場合が多いでしょう。 今回の問題1番と5番がそれに該当しますが、下記の順を理解しておくといいでしょう。

important > style属性 > id属性セレクタ > class属性セレクタ

たま〜にブラウザ依存する機能などもありますが、最近ではほとんどブラウザによって差が出ることはあまりなくなってきたので、 どのブラウザでcssを作って学習しても問題ないですよ。