第2部 HTML/CSS — Day 12 / 30

背景と枠線

body {
  background: #f5f6f8;
}
.card {
  background: #ffffff;
  border: 1px solid #cbd2d9;
  border-radius: 12px;
  padding: 1rem;
}

border-radius は角の丸みです。この講義サイトの白いカードも、ほぼこの組み合わせ(灰色の背景+白い角丸カード)でできています。

今日の練習

div タグに class="card" を付けて、カードの中に見出しと段落を入れてみましょう。

模範解答を見る

<style>
  body {
    background: #f5f6f8;
  }
  .card {
    background: #ffffff;
    border: 1px solid #cbd2d9;
    border-radius: 12px;
    padding: 1rem;
  }
</style>

<div class="card">
  <h2>お知らせ</h2>
  <p>カードの中に見出しと段落を入れました。</p>
</div>

理解度チェック

学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。

学籍番号氏名（フルネーム）

Q. 角を丸くするCSSプロパティはどれでしょうか?

background padding border-radius

Completed

正解です！Day 12 の学習を確認しました

科目	経営情報 2026
教材	プログラミング入門30日 Day 12 背景と枠線
学籍番号
氏名
提出時間
確認コード

提出時間はサーバー時刻に基づきます。

この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。