CSSになれると、表示系に強くなれます。
イラストアプリで自由に好きなイラストを描くのと同じように、ホームページ上に思った通りのデザインが構築できるようになります。
アニメーションからレスポンシブデザインまで、Webサイトでは欠かす事ができない技術でもあるCSSをあまり詳しくない人は多いようなので、
簡単クイズで少しでも詳しくなれるようにしてみましょう。
問題1：クラスセレクタが効かない？
[html]
<div class="box" style="color: blue;"></div>
[css]
.box {
color: red;
}
Q. 上記の場合、<div> の文字色はどうなる？
- 赤になる
- 青になる
- 黒のまま
- ブラウザによって変わる
正解
正解を見る。2. 青になる
解説
インラインスタイル（style="..."）は、外部CSSより優先順位が高いため、.box の定義よりも style が勝つ。問題2：marginが効かない？
[css]
.container {
margin: 0 auto;
width: 100%;
}
Q. このCSSが効かない原因として最も考えられるのは？
- margin に数値がない
- width が100%だと中央寄せできない
- auto はブロック要素には効かない
- container クラスがdiv以外に使われている
正解
正解を見る。2. width が100%だと中央寄せできない
解説
margin: 0 auto は要素を中央に寄せるが、width が100%だと画面幅いっぱいなので中央に寄せる余地がない。問題3：子要素のフォントが変わらない？
[css]
.parent {
font-size: 16px;
}
.child {
font-size: 1em;
}
Q. このとき、.child のフォントサイズはどうなる？
- 16px
- ブラウザのデフォルトサイズ
- 計算不能で無効になる
- .child に font-size が設定されていないことになる
正解
正解を見る。1. 16px
解説
1em は親要素の font-size を基準にした相対指定。 親 .parent が 16px なので、1em はそのまま 16px。問題4：背景画像が全体に表示されない？
[css]
.banner {
background-image: url("bg.jpg");
background-size: cover;
}
Q. 以下のどれかが抜けていて背景が表示されないかも？
- height の指定
- background-color
- display: block
- background-repeat の指定
正解
正解を見る。1. height の指定
解説
background-size: cover; だけでは表示されず、要素の高さが 0 なら背景画像も見えない。 背景を表示させるには、最低限 height を指定しよう。問題5：セレクタの優先順位が想定と違う？
[css]
#main .title {
color: blue;
}
.title {
color: red;
}
Q. .title の文字色はどうなる？
- 赤
- 青
- 継承される
- エラーになる
正解
正解を見る。2. 青
解説
#main .title はID＋クラスの組み合わせで、.title よりセレクタの重みが大きい。 より強いセレクタが優先される。あとがき
cssを難解と感じる人は、おそらくセレクタの優先順位が理解できていない場合が多いでしょう。 今回の問題1番と5番がそれに該当しますが、下記の順を理解しておくといいでしょう。important > style属性 > id属性セレクタ > class属性セレクタたま〜にブラウザ依存する機能などもありますが、最近ではほとんどブラウザによって差が出ることはあまりなくなってきたので、 どのブラウザでcssを作って学習しても問題ないですよ。
0 件のコメント:
コメントを投稿