プログラミング入門30日 の Day 12

第2部 HTML/CSS

Day 12 背景と枠線

🎯 今日のゴール background・border・border-radius でカード風のデザインを作れる。

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 の提出欄にアップロードしてください。

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

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

問題番号プログラミング入門30日 Day 12
学籍番号
氏名
提出時間
確認コード

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

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