スキルテスト: 背景と境界線
このスキルテストの目的は、 CSS のボックスの背景と境界線を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
課題 1
この課題では、ページのヘッダーに背景、境界線、簡単なスタイル設定を追加します。
課題を完成させるには、次のようにしてください。
-
ボックスには 5px の黒い実線の境界線をつけ、角は 10px で丸めましょう。
-
<h2>の背景色を半透明の黒にし、テキストを白にしましょう。 -
背景画像を追加し、ボックスに応じた大きさにしましょう。次の画像を利用することができます。
https://mdn.github.io/shared-assets/images/examples/balloons.jpg
最終的には下記画像のようになるはずです。
<div class="box">
<h2>Backgrounds & Borders</h2>
</div>
body {
padding: 1em;
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.box {
padding: 0.5em;
}
.box {
/* ここにスタイルを追加 */
}
h2 {
/* ここにスタイルを追加 */
}
ここをクリックすると、模範解答を表示します。
border、border-radius、background-image、background-size を使用し、 RGB 色を使用して背景色を部分的に透明にする方法を理解しましょう。
.box {
border: 5px solid #000;
border-radius: 10px;
background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
background-size: cover;
}
h2 {
background-color: rgb(0 0 0 / 50%);
color: #fff;
}
課題 2
この課題では、装飾的なボックスに背景画像や境界画像、他にもスタイル設定を追加してください。
課題を完成させるには、次のようにしてください。
-
ボックスには 5px の水色の境界線をつけ、左上の角を 20px、右下の角を 40px 丸めましょう。
-
この見出しは画像
star.pngを背景画像として使用しており、左側には中央に配置された単一の星、右側には星のパターンが繰り返し配置されています。 次の画像を使用することができます。https://mdn.github.io/shared-assets/images/examples/star.png
-
見出しのテキストが画像に重ならないように、また中央に配置されていることを確認してください。これを達成するために前回学んだテクニックを使用する必要があります。
最終的には下記画像のようになるはずです。
<div class="box">
<h2>Backgrounds & Borders</h2>
</div>
body {
padding: 1em;
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.box {
width: 300px;
padding: 0.5em;
}
.box {
/* ここにスタイルを追加 */
}
h2 {
/* ここにスタイルを追加 */
}
ここをクリックすると、模範解答を表示します。
見出しにパディングを追加して、星の画像と重ならないようにする必要があります。これは、先のボックスモデルのレッスンで学んだこととリンクしています。
テキストは、 text-align プロパティで配置する必要があります。
.box {
border: 5px solid lightblue;
border-top-left-radius: 20px;
border-bottom-right-radius: 40px;
}
h2 {
padding: 0 40px;
text-align: center;
background:
url("https://mdn.github.io/shared-assets/images/examples/star.png")
no-repeat left center,
url("https://mdn.github.io/shared-assets/images/examples/star.png") repeat-y
right center;
}