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

最近書かない日はないというほど、Webでのcssで使用頻度の高い"Flexbox"についてのクイズを作ってみました。 使ったことがない人は、まるで意味がわからないし、駆け出し系の人には少し難易度が高いかもしれませんが、 実際にコーディングしてみるとこれらのクイズの内容でつまづくことが多いので、ここ最近での必須スキルといってもいいかもですね。

問題1：要素が横並びにならない？

[html] <div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div> [css] .container { display: flexbox; } .item { width: 100px; height: 100px; background: skyblue; }

Q. 期待したのは横並び。でも縦に並んでいる。なぜ？

1. display: flexbox; の書き方が間違っている
2. .item の幅が固定されていない
3. flex-direction を指定していない
4. .container の高さがないため

正解

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

問題2：中央寄せができない？

[html] <div class="container"> <p>Hello</p> </div> [css] .container { display: flex; justify-content: center; }

Q. 横方向には中央寄せできたけど、縦方向は中央にならない。なぜ？

1. align-items: center; が必要
2. justify-content は縦方向の中央寄せ
3. container に高さが指定されていない
4. <p> タグには中央寄せできない

正解

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

問題3：要素の幅が広がらない？

[html] <div class="container"> <div class="item">A</div> <div class="item">B</div> </div> [css] .container { display: flex; } .item { flex-grow: 1; }

Q. .item が親要素いっぱいに広がらない原因は？

1. flex-grow は単体では機能しない
2. .item に width を指定する必要がある
3. .container の幅が固定されていない
4. .item に display: inline が必要

正解

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

あとがき

ホームページのコーディングをやっている時にいつも思うんですが、 DOM構造の親部分や子、孫をしっかりと把握してCSS設計をしてからじゃないと、 その場しのぎでやってしまうと、表示がグッチャグチャになって、やり直しになるし、 変なカラム落ちのような表示不具合に対応できなくなってしまいます。 そもそも、やりたいように表示をさせられない時のジレンマは、エンジニアにとってのストレスそのものでしょう。 CSSを文字を書くように使えるようになるには、英語を話せるようになるのと同じように、 スタイルシート脳というのが必要なんですが、この方法については、別の機会に解説したいと思います。 もしかしたら、ゲーム内のコンテンツで解説できるといいかな？