スキルテスト: ボックスモデル
このスキルテストの目的は、 CSS ボックスモデルを理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
課題 1
この課題では、下記の 2 種類のボックスがあり、 1 つは標準ボックスモデル、もう 1 つは代替ボックスモデルを使用しています。 .alternate クラスに宣言を追加して 2 つ目のボックスの幅を変更し、最初のボックスの視覚的な幅と一致するようにしましょう。
最終的には下記画像のようになるはずです。
<div class="box">標準ボックスモデルを使用しています。</div>
<div class="box alternate">代替ボックスモデルを使用しています。</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
border: 5px solid rebeccapurple;
background-color: lightgray;
padding: 40px;
margin: 40px;
width: 300px;
height: 150px;
}
.alternate {
box-sizing: border-box;
}
ここをクリックすると、模範解答を表示します。
2 つ目のブロックの高さと幅を大きくし、パディングと境界線のサイズを追加する必要があります。
.alternate {
box-sizing: border-box;
width: 390px;
}
課題 2
この課題では、ボックスに次のものを追加してください。
- 5px、黒、点線の境界線
- 20px の上マージン
- 1em の右マージン
- 40px の下マージン
- 2em の左マージン
- すべての辺に 1em のパディング
最終的には下記画像のようになるはずです。
<div class="box">標準ボックスモデルを使用しています。</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
}
ここをクリックすると、模範解答を表示します。
この作業には、マージン、境界線、パディングのプロパティを正しく使用することが含まれます。
個別指定プロパティ（margin-top、margin-right など）を使用することもできますが、すべての辺にマージンとパディングを設定する場合は、一括指定を使用するのがより良い選択でしょう。
.box {
border: 5px dotted black;
margin: 20px 1em 40px 2em;
padding: 1em;
}
課題 3
この課題では、インライン要素にマージン、パディング、境界線があります。しかし、上下の行が重なっています。
この課題を完了するには、要素をインラインのまま維持しながら、マージン、パディング、および境界線のサイズが他の行でも尊重されるように CSS を更新してください。
最終的には下記画像のようになるはずです。
<div class="box">
<p>
Veggies es bonus vobis, <span>proinde vos postulo</span> essum magis
kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.box span {
background-color: pink;
border: 5px solid black;
padding: 1em;
}
ここをクリックすると、模範解答を表示します。
この課題を解決するには、異なる display 値を使用するタイミングを理解することが要求されます。
display: inline-block を追加すると、ブロック方向のマージン、境界線、パディングにより、他にも行が要素から押し出されるようになります。
.box span {
background-color: pink;
border: 5px solid black;
padding: 1em;
display: inline-block;
}