プログラミング入門30日 の Day 11
🎯 今日のゴール color・font-size・font-family・font-weight で文字の見た目を変えられる。
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 の提出欄にアップロードしてください。
Q. 文字の大きさを変えるCSSプロパティはどれでしょうか?
| 問題番号 | プログラミング入門30日 Day 11 |
|---|---|
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の提出欄にアップロードしてください。