スキルテスト: 背景と境界線

この課題では、ページのヘッダーに背景、境界線、簡単なスタイル設定を追加します。

1. ボックスには 5px の黒い実線の境界線をつけ、角は 10px で丸めましょう。

2. 背景画像を追加し（URL balloons.jpg を使用してください）、ボックスに応じた大きさにしましょう。

3. <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 {
  /* ここにスタイルを追加 */
}

.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;
}

この課題では、装飾ボックスに背景画像や境界画像、他にもスタイル設定を追加してください。

1. ボックスには 5px の水色の境界線をつけ、左上の角を 20px、右下の角を 40px 丸めましょう。

2. この見出しは画像 star.png を背景画像として使用しており、左側には中央に配置された単一の星、右側には星のパターンが繰り返し配置されています。 次の画像を使用することができます。

   https://mdn.github.io/shared-assets/images/examples/star.png
   

3 見出しのテキストが画像に重ならないように、また中央に配置されていることを確認してください。これを達成するために前回学んだテクニックを使用する必要があります。

最終的には下記画像のようになるはずです。

下記のライブコードを更新して、完成例を再現してみてください。

<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 {
  /* ここにスタイルを追加 */
}

.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;
}

• CSS によるスタイル設定の基本