第2部 HTML/CSS — Day 11 / 30
文字の装飾
h1 {
color: #2563eb; /* 色(16進カラーコード) */
font-size: 2rem; /* 大きさ */
font-weight: 700; /* 太さ */
}
body {
font-family: "Meiryo", sans-serif; /* 書体 */
}色は blue のような名前のほか、#2563eb のような16進カラーコードで指定できます。font-size の単位 rem は「基準サイズの何倍か」を表し、画面サイズが変わっても扱いやすい単位です。
今日の練習
「カラーピッカー」で検索してカラーコードを調べ、見出しと本文の色の組み合わせを自分で作ってみましょう。
模範解答を見る
h1 {
color: #1d4ed8; /* 濃い青 */
}
p {
color: #374151; /* 濃いグレー(真っ黒より読みやすい) */
}
body {
background: #f9fafb; /* ごく薄いグレー */
}一例です。背景色と文字色のコントラストが十分にあって読みやすいか、という視点でも確認してみましょう。
理解度チェック
学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。
Q. 文字の大きさを変えるCSSプロパティはどれでしょうか?
Completed
正解です！Day 11 の学習を確認しました
| 科目 | 経営情報 2026 |
|---|---|
| 教材 | プログラミング入門30日 Day 11 文字の装飾 |
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。