スキルテスト: 値と単位
このスキルテストの目的は、 CSS プロパティで使われる様々な種類の値と単位を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
課題 1
この課題では、最初のリストアイテムに16進カラーコードを使用して背景色が指定されています。課題は、異なる形式で同じ色を使用して CSS を完成させ、さらに最後のリストアイテムで背景を半透明にすることです。
- 2 つ目のリストアイテムには RGB 色を使用しましょう。
- 3 つ目には HSL 色を使用しましょう。
- 4 つ目には RGB 色を使用しますが、アルファチャンネルを
0.6に設定しましょう。
このリンクで 16 進数の色の変換を探すことができます。その値を CSS で使用する方法を見つける必要があります。最終的には下記画像のようになるはずです。
html
<ul>
<li class="hex">hex color</li>
<li class="rgb">RGB color</li>
<li class="hsl">HSL color</li>
<li class="transparency">Alpha value 0.6</li>
</ul>
css
body {
font: 1.2em / 1.5 sans-serif;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 1em;
padding: 0.5em;
}
.hex {
background-color: #86defa;
}
/* ここにスタイルを追加してください */
課題 2
この課題では、下記記述されているように、様々な項目のテキストのサイズを設定してください。
<h1>要素は 50 ピクセルにしてください。<h2>要素は 2em にしてください。<p>要素は 16 ピクセルにしてください。<p>要素のうち、<h1>の直後のものは 120% にしてください。
最終的には下記画像のようになるはずです。
html
<h1>Level 1 heading</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<h2>Level 2 heading</h2>
<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>
css
body {
font: 1.2em / 1.5 sans-serif;
}
h1 {
/* ここにスタイルを追加 */
}
h2 {
/* ここにスタイルを追加 */
}
p {
/* ここにスタイルを追加 */
}
h1 + p {
/* ここにスタイルを追加 */
}
ここをクリックすると、模範解答を表示します。
次の長さの値を使用することができます。
css
h1 {
font-size: 50px;
}
h2 {
font-size: 2em;
}
p {
font-size: 16px;
}
h1 + p {
font-size: 120%;
}
課題 3
この課題では、背景画像が水平方向の中央に配置され、ボックスの上部から 20％ になるように移動させます。
最終的には下記画像のようになるはずです。
html
<div class="box"></div>
css
.box {
border: 5px solid #000;
height: 350px;
}
.box {
background-image: url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");
background-repeat: no-repeat;
}
ここをクリックすると、模範解答を表示します。
background-position に center キーワードとパーセント値を使用します。
css
.box {
background-image: url("https://mdn.github.io/shared-assets/images/examples/purple-star.png");
background-repeat: no-repeat;
background-position: center 20%;
}