CSSの色とフォントの基本
色の指定方法やフォントの設定を学んで、読みやすく美しいWebページを作りましょう。カラーコード、フォントサイズ、行間の調整方法をマスターします。
CSSで見た目を美しくしよう
Section titled “CSSで見た目を美しくしよう”前回まではHTMLの構造について学びました。今度はCSSを使って、文字の色やフォントを変更して、見た目を美しくしてみましょう1。
CSSを使うと、同じHTMLでも全く違った印象のページに変えることができます。
CSSファイルをHTMLに読み込む方法
Section titled “CSSファイルをHTMLに読み込む方法”まず、CSSファイルをHTMLに読み込む方法を確認しましょう：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>ぽんちゃんの散歩日記</title> <!-- CSSファイルを読み込む --> <link rel="stylesheet" href="style.css"></head><body> <h1>ぽんちゃんの散歩日記</h1> <p>今日は公園でたくさんの友達に会いました。</p></body></html>/* これがCSSファイルです */h1 { color: blue;}
p { color: green;}<link rel="stylesheet" href="style.css"> という行で、CSSファイルを読み込んでいます。
え？ どこに CSS なんてあるかって？ ファイル名のあるタブの style.css をクリックすると、CSSファイルの内容が表示されるよ。
文字色を変える（color プロパティ）
Section titled “文字色を変える（color プロパティ）”color プロパティを使って、文字の色を変更できます。色の指定方法はいくつかあります2。
色名での指定
Section titled “色名での指定”最も簡単な方法は、色の名前で指定することです：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>みーちゃんの観察日記</title> <link rel="stylesheet" href="style.css"></head><body> <h1>みーちゃんの観察日記</h1>
<h2>今日見つけた花</h2> <p>公園でピンクの桜を見つけました。</p>
<h2>出会った動物たち</h2> <p>小さな茶色いリスが木の実を食べていました。</p>
<h2>今日の天気</h2> <p>空が青くてとても気持ちの良い日でした。</p></body></html>h1 { color: purple;}
h2 { color: orange;}
p { color: black;}よく使う色名：
red（赤）blue（青）green（緑）orange（オレンジ）purple（紫）black（黒）white（白）gray（灰色）
実践: 色名で文字色を変えてみよう
Section titled “実践: 色名で文字色を変えてみよう”以下のコメントを参考に、色名を使って文字色を設定してみてください：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>こたろうの庭日記</title> <link rel="stylesheet" href="style.css"></head><body> <h1>こたろうの庭日記</h1>
<h2>朝の庭</h2> <p>朝露がキラキラ光っていて、とても美しかったです。</p>
<h2>お昼の庭</h2> <p>蝶々がひらひらと花の周りを飛んでいました。</p>
<h2>夕方の庭</h2> <p>夕日で庭全体がオレンジ色に染まりました。</p></body></html>/* TODO: h1の文字色を green に設定してください */
/* TODO: h2の文字色を blue に設定してください */
/* TODO: pの文字色を purple に設定してください */解答例を見る
h1 { color: green;}
h2 { color: blue;}
p { color: purple;}色選びのポイント：
- 読みやすさを最優先に考える
- 背景色とのコントラストを意識する
- 一つのページで使う色は3-4色程度に抑える
16進数カラーコード（#hex）での指定
Section titled “16進数カラーコード（#hex）での指定”より詳細な色指定には、16進数カラーコードを使います。# から始まる6桁の英数字で色を表現します：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>はなちゃんの季節日記</title> <link rel="stylesheet" href="style.css"></head><body> <h1>はなちゃんの季節日記</h1>
<h2>春の訪れ</h2> <p>桜の淡いピンクが空に映えて美しかったです。</p>
<h2>夏の思い出</h2> <p>深い緑の葉っぱの間から、蝉の声が聞こえてきました。</p>
<h2>秋の風景</h2> <p>オレンジ色の紅葉が風に舞って、まるで舞踏会のようでした。</p></body></html>h1 { color: #ff6b9d; /* ピンク色 */}
h2 { color: #4a90e2; /* 青色 */}
p { color: #555555; /* ダークグレー */}16進数カラーコードの構造：
#RRGGBB |||||| ||||++-- B（青）の強さ (00-FF) ||++---- G（緑）の強さ (00-FF) ++------ R（赤）の強さ (00-FF)よく使う16進数カラーコード：
#000000（黒）#ffffff（白）#ff0000（赤）#00ff00（緑）#0000ff（青）#ffff00（黄色）#ff00ff（マゼンタ）#00ffff（シアン）
RGB関数での指定
Section titled “RGB関数での指定”RGB（Red, Green, Blue）の値を0-255の数値で指定する方法もあります：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>ももちゃんの色探し日記</title> <link rel="stylesheet" href="style.css"></head><body> <h1>ももちゃんの色探し日記</h1>
<h2>赤い発見</h2> <p>真っ赤なてんとう虫を見つけました。</p>
<h2>緑の世界</h2> <p>新緑の季節で、緑がとても鮮やかです。</p>
<h2>青い空</h2> <p>雲一つない青い空が広がっていました。</p></body></html>h1 { color: rgb(255, 100, 150); /* 明るいピンク */}
h2 { color: rgb(70, 130, 180); /* スチールブルー */}
p { color: rgb(85, 85, 85); /* ダークグレー */}RGB関数の特徴：
- 各色の値は 0-255 の数値で指定
rgb(赤, 緑, 青)の順番で記述- 数値が大きいほどその色が強くなる
rgb(0, 0, 0)は黒、rgb(255, 255, 255)は白
背景色を変える（background-color プロパティ）
Section titled “背景色を変える（background-color プロパティ）”background-color プロパティで背景色を設定できます：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>ふわりんの雲観察日記</title> <link rel="stylesheet" href="style.css"></head><body> <h1>ふわりんの雲観察日記</h1>
<section class="morning"> <h2>朝の雲</h2> <p>薄いピンク色の雲が空に浮かんでいました。</p> </section>
<section class="afternoon"> <h2>昼の雲</h2> <p>真っ白でふわふわの雲が青空に映えていました。</p> </section>
<section class="evening"> <h2>夕方の雲</h2> <p>オレンジ色に染まった雲が美しく光っていました。</p> </section></body></html>body { background-color: #f0f8ff; /* アリスブルー */}
h1 { background-color: #fff8dc; /* コーンシルク */ color: #4169e1; /* ロイヤルブルー */}
.morning { background-color: #ffe4e6; /* 薄いピンク */}
.afternoon { background-color: #e6f3ff; /* 薄い青 */}
.evening { background-color: #fff4e6; /* 薄いオレンジ */}実践: 背景色と文字色を組み合わせてみよう
Section titled “実践: 背景色と文字色を組み合わせてみよう”読みやすいコントラストを意識して、背景色と文字色を設定してみてください：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>ぺんぺんのお魚観察日記</title> <link rel="stylesheet" href="style.css"></head><body> <h1>ぺんぺんのお魚観察日記</h1>
<section class="ocean"> <h2>深海の魚</h2> <p>暗い海の中で光る魚を見つけました。とても神秘的でした。</p> </section>
<section class="coral"> <h2>サンゴ礁の魚</h2> <p>カラフルな熱帯魚がサンゴの間を泳いでいました。</p> </section>
<section class="river"> <h2>川の魚</h2> <p>清流で小さな鮎が元気よく泳いでいる姿を見ました。</p> </section></body></html>body { background-color: #f0f8ff;}
h1 { /* TODO: 背景色を濃い青 (#1e3a8a) に設定 */ /* TODO: 文字色を白 (white) に設定 */}
.ocean { /* TODO: 背景色を黒 (#000000) に設定 */ /* TODO: 文字色を明るい青 (#87ceeb) に設定 */}
.coral { /* TODO: 背景色を薄いオレンジ (#fff4e6) に設定 */ /* TODO: 文字色を濃いオレンジ (#ff6600) に設定 */}
.river { /* TODO: 背景色を薄い緑 (#f0fff0) に設定 */ /* TODO: 文字色を緑 (#228b22) に設定 */}解答例を見る
h1 { background-color: #1e3a8a; color: white;}
.ocean { background-color: #000000; color: #87ceeb;}
.coral { background-color: #fff4e6; color: #ff6600;}
.river { background-color: #f0fff0; color: #228b22;}コントラストのポイント：
- 暗い背景には明るい文字色
- 明るい背景には暗い文字色
- 同じような明度の色の組み合わせは避ける
- 色だけでなく、明度の差も重要
フォントの種類を指定する（font-family プロパティ）
Section titled “フォントの種類を指定する（font-family プロパティ）”font-family プロパティで、使用するフォントを指定できます2：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>ちびちゃんの文字研究日記</title> <link rel="stylesheet" href="style.css"></head><body> <h1>ちびちゃんの文字研究日記</h1>
<section class="serif-text"> <h2>明朝体で書かれた詩</h2> <p>古い本で見つけた美しい詩を、明朝体で表現してみました。上品で読みやすい雰囲気になります。</p> </section>
<section class="sans-serif-text"> <h2>ゴシック体のメモ</h2> <p>今日学んだことをゴシック体でメモしました。現代的で読みやすい印象になります。</p> </section>
<section class="monospace-text"> <h2>等幅フォントのコード</h2> <p>プログラミングコードは等幅フォントで書くときれいに揃います。HTML CSSも等幅で見やすく。</p> </section></body></html>body { background-color: #fafafa; color: #333333;}
h1 { font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; color: #2c5aa0;}
.serif-text { font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;}
.sans-serif-text { font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;}
.monospace-text { font-family: "Consolas", "Monaco", "Courier New", monospace; background-color: #f5f5f5;}フォントファミリーの種類：
- serif（明朝体系）: 文字の端に小さな装飾があるフォント。上品で読書向き
- sans-serif（ゴシック体系）: 装飾のないシンプルなフォント。現代的で読みやすい
- monospace（等幅系）: 全ての文字が同じ幅のフォント。プログラミングコード向き
- cursive（手書き風系）: 筆記体のような装飾的なフォント
- fantasy（装飾系）: デザイン性の高い装飾的なフォント
実践: 用途に応じてフォントを選んでみよう
Section titled “実践: 用途に応じてフォントを選んでみよう”内容に応じて適切なフォントを選択してみてください：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>とらちゃんの読書感想文</title> <link rel="stylesheet" href="style.css"></head><body> <h1>とらちゃんの読書感想文</h1>
<section class="book-title"> <h2>今月読んだ本</h2> <p>「森の動物たちの冒険」という素敵な本を読みました。</p> </section>
<section class="code-example"> <h2>本の中にあったプログラム</h2> <p><p>Hello, Forest Animals!</p></p> </section>
<section class="modern-note"> <h2>現代風メモ</h2> <p>デジタル時代に合わせて、読書記録もスマートに管理したいと思います。</p> </section></body></html>body { background-color: #f9f9f9; color: #444444;}
h1 { color: #8b4513;}
/* TODO: .book-title を明朝体系（serif）のフォントに設定してください */.book-title {
}
/* TODO: .code-example を等幅系（monospace）のフォントに設定してください */.code-example {
}
/* TODO: .modern-note をゴシック体系（sans-serif）のフォントに設定してください */.modern-note {
}解答例を見る
.book-title { font-family: "Times New Roman", "游明朝", YuMincho, serif;}
.code-example { font-family: "Consolas", "Monaco", "Courier New", monospace; background-color: #f0f0f0;}
.modern-note { font-family: Verdana, "游ゴシック", YuGothic, sans-serif;}フォント選択のガイドライン：
- 読み物・文学: serif（明朝体）で上品な印象
- コード・プログラム: monospace（等幅）で文字が揃う
- 現代的な文書: sans-serif（ゴシック体）でクリーンな印象
文字サイズを調整する（font-size プロパティ）
Section titled “文字サイズを調整する（font-size プロパティ）”font-size プロパティで文字の大きさを指定できます：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>くまちゃんのサイズ実験日記</title> <link rel="stylesheet" href="style.css"></head><body> <h1>くまちゃんのサイズ実験日記</h1>
<p class="small-text">小さな文字で書いた秘密のメモです。</p>
<p class="normal-text">普通のサイズで書いた今日の出来事です。</p>
<p class="large-text">大きな文字で書いた重要なお知らせです。</p>
<p class="extra-large-text">とても大きな文字で書いた特別な発見です。</p></body></html>body { background-color: #fff8e7; color: #5d4037; font-family: "游ゴシック", YuGothic, sans-serif;}
h1 { font-size: 32px; color: #8d6e63;}
.small-text { font-size: 12px;}
.normal-text { font-size: 16px;}
.large-text { font-size: 24px;}
.extra-large-text { font-size: 36px;}文字サイズの単位：
- px（ピクセル）: 絶対的なサイズ。
16px、24pxなど - em: 親要素の文字サイズを基準とした相対サイズ。
1.2em、0.8emなど - rem: ルート要素（html）の文字サイズを基準とした相対サイズ。
1.5rem、0.9remなど
相対単位（em、rem）を使ってみよう
Section titled “相対単位（em、rem）を使ってみよう”相対単位を使うと、レスポンシブで柔軟なサイズ指定ができます：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>りすちゃんの相対サイズ実験</title> <link rel="stylesheet" href="style.css"></head><body> <h1>りすちゃんの相対サイズ実験</h1>
<section class="story"> <h2>今日の出来事</h2> <p>どんぐりを <span class="emphasis">たくさん</span> 見つけました。</p> <p class="small-note">※どんぐりは冬の準備のために大切に保存します</p> </section>
<section class="large-section"> <h2>大発見</h2> <p>新しい木の穴を発見しました。とても <span class="emphasis">快適</span> そうです。</p> </section></body></html>html { font-size: 18px; /* ベースサイズ */}
body { background-color: #f4f1e8; color: #4a4a4a; font-family: "游ゴシック", YuGothic, sans-serif;}
h1 { font-size: 2rem; /* 18px × 2 = 36px */ color: #8b4513;}
h2 { font-size: 1.5rem; /* 18px × 1.5 = 27px */ color: #a0522d;}
p { font-size: 1rem; /* 18px × 1 = 18px */}
.emphasis { font-size: 1.2em; /* 親要素の1.2倍 */ font-weight: bold; color: #ff6b35;}
.small-note { font-size: 0.8rem; /* 18px × 0.8 = 14.4px */ color: #888888;}
.large-section { font-size: 1.2rem; /* 18px × 1.2 = 21.6px */}
.large-section .emphasis { font-size: 1.2em; /* 21.6px × 1.2 = 25.92px */}相対単位の利点：
- em: 親要素に応じて自動的にサイズが調整される
- rem: ページ全体の基本サイズを変更すると、すべての要素が比例して変わる
- レスポンシブ: 画面サイズや設定に応じて適切にスケールする
文字の太さを変更する（font-weight プロパティ）
Section titled “文字の太さを変更する（font-weight プロパティ）”font-weight プロパティで文字の太さを指定できます：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>ひよこちゃんの太さ研究</title> <link rel="stylesheet" href="style.css"></head><body> <h1>ひよこちゃんの太さ研究</h1>
<p class="light">軽やかな文字で書いた朝の挨拶です。</p>
<p class="normal">普通の太さで書いた日常の記録です。</p>
<p class="bold">太い文字で書いた重要なお知らせです。</p>
<p class="extra-bold">とても太い文字で書いた緊急のメッセージです。</p></body></html>body { background-color: #fffacd; color: #8b7d3a; font-family: "游ゴシック", YuGothic, sans-serif; font-size: 18px;}
h1 { font-weight: bold; color: #ff8c00;}
.light { font-weight: 300; /* または light */}
.normal { font-weight: 400; /* または normal */}
.bold { font-weight: 700; /* または bold */}
.extra-bold { font-weight: 900;}font-weight の値：
- 数値: 100, 200, 300, 400, 500, 600, 700, 800, 900
- キーワード:
normal（400相当）bold（700相当）lighter（親要素より一段階軽く）bolder（親要素より一段階太く）
実践: 文字の太さで情報の重要度を表現してみよう
Section titled “実践: 文字の太さで情報の重要度を表現してみよう”文字の太さを使って、情報の重要度を視覚的に表現してみてください：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>うさぎちゃんの重要度別メモ</title> <link rel="stylesheet" href="style.css"></head><body> <h1>うさぎちゃんの重要度別メモ</h1>
<section> <h2 class="urgent">緊急</h2> <p class="urgent-text">人参が少なくなってきました。明日買い物に行く必要があります。</p> </section>
<section> <h2 class="important">重要</h2> <p class="important-text">新しい穴掘りスポットを見つけました。来週確認する予定です。</p> </section>
<section> <h2 class="normal">通常</h2> <p class="normal-text">今日は天気が良くて、お散歩が気持ちよかったです。</p> </section>
<section> <h2 class="memo">メモ</h2> <p class="memo-text">クローバーが美味しい季節になってきました。</p> </section></body></html>body { background-color: #f0f8f0; color: #2e4d2e; font-family: "游ゴシック", YuGothic, sans-serif; font-size: 16px;}
h1 { color: #8fbc8f; font-weight: bold;}
/* TODO: .urgent のh2を font-weight: 900 に設定 */.urgent {
}
/* TODO: .urgent-text を font-weight: bold に設定 */.urgent-text {
}
/* TODO: .important のh2を font-weight: 700 に設定 */.important {
}
/* TODO: .important-text を font-weight: 600 に設定 */.important-text {
}
/* TODO: .normal のh2を font-weight: normal に設定 */.normal {
}
/* TODO: .normal-text を font-weight: normal に設定 */.normal-text {
}
/* TODO: .memo のh2を font-weight: 300 に設定 */.memo {
}
/* TODO: .memo-text を font-weight: 300 に設定 */.memo-text {
}解答例を見る
.urgent { font-weight: 900; color: #dc3545;}
.urgent-text { font-weight: bold; color: #721c24;}
.important { font-weight: 700; color: #fd7e14;}
.important-text { font-weight: 600; color: #8a4a0a;}
.normal { font-weight: normal; color: #28a745;}
.normal-text { font-weight: normal;}
.memo { font-weight: 300; color: #6c757d;}
.memo-text { font-weight: 300; color: #495057;}太さを使った情報デザイン：
- 緊急・重要: 太い文字（700-900）と目立つ色
- 通常: 標準的な太さ（400）
- 補足情報: 細い文字（100-300）と控えめな色
行間を調整する（line-height プロパティ）
Section titled “行間を調整する（line-height プロパティ）”line-height プロパティで行と行の間隔を調整できます。読みやすさに大きく影響します：
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>ねこちゃんの行間実験</title> <link rel="stylesheet" href="style.css"></head><body> <h1>ねこちゃんの行間実験</h1>
<section class="narrow"> <h2>狭い行間</h2> <p>狭い行間で書いた文章です。文字がぎゅっと詰まって見えます。長い文章を読むときは少し疲れるかもしれません。でも情報を詰め込みたいときには有効です。</p> </section>
<section class="normal"> <h2>標準的な行間</h2> <p>標準的な行間で書いた文章です。読みやすさと情報量のバランスが取れています。一般的なWebサイトではこのくらいの行間が使われることが多いです。</p> </section>
<section class="wide"> <h2>広い行間</h2> <p>広い行間で書いた文章です。ゆったりとした印象で、読書に集中しやすくなります。高級感や上品さを演出したいときにも効果的です。</p> </section></body></html>body { background-color: #fff5ee; color: #4a4a4a; font-family: "游ゴシック", YuGothic, sans-serif; font-size: 16px;}
h1 { color: #ff7f50; line-height: 1.2;}
h2 { color: #ff6347; line-height: 1.3;}
.narrow { line-height: 1.2; /* 文字サイズの1.2倍 */}
.normal { line-height: 1.6; /* 文字サイズの1.6倍 */}
.wide { line-height: 2.0; /* 文字サイズの2倍 */}line-height の指定方法：
- 数値のみ:
1.6- 文字サイズの倍数で指定（推奨） - 単位あり:
24px、1.6em- 絶対値や相対値で指定 - パーセント:
160%- 文字サイズに対する割合
読みやすさのガイドライン：
- 1.2-1.4: やや詰まった印象、情報を多く表示したい場合
- 1.5-1.8: 読みやすい標準的な行間
- 2.0以上: ゆったりした印象、高級感を演出
総合演習: 動物日記サイトを完成させよう
Section titled “総合演習: 動物日記サイトを完成させよう”これまで学んだ色とフォントの知識を使って、完全な動物日記サイトを作ってみましょう。 以下のHTMLに対して、指示に従ってCSSを完成させてください。
＜A＞ページ全体のベーススタイル
- bodyの背景色を薄いクリーム色（#faf8f3）に設定
- 基本の文字色を濃いグレー（#333333）に設定
- フォントファミリーを読みやすいゴシック体に設定
- 基本の文字サイズを16pxに設定
＜B＞ヘッダーのスタイリング
- h1（メインタイトル）を大きく目立つように設定（36px、太字、森をイメージする緑色）
- サブタイトルを控えめで上品に設定（斜体、少し小さめ、薄いグレー）
＜C＞日記エントリーのベーススタイル
- 各diary-entryに余白と背景色を設定して読みやすく
- 角を丸くして優しい印象に
＜D＞動物別のテーマカラー
- うさぎ（.rabbit）：ピンク系の色合い
- りす（.squirrel）：オレンジ系の色合い
- くま（.bear）：茶色系の色合い
＜E＞文字の階層とアクセント
- h2（動物名）を各動物のテーマカラーで大きく表示
- h3（日記タイトル）を適度なサイズに設定
- .highlightクラスで重要な部分を強調
- .timestampクラスで時刻を控えめに表示
＜F＞フッターのスタイリング
- 背景色を少し暗めに設定
- 文字を中央揃えに
- 適切な余白を設定
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>森の仲間たちの日記帳</title> <link rel="stylesheet" href="style.css"></head><body> <header> <h1>森の仲間たちの日記帳</h1> <p class="subtitle">みんなで綴る、楽しい毎日の記録</p> </header>
<main> <article class="diary-entry rabbit"> <h2>うさぎのももちゃん</h2> <h3>新緑の季節</h3> <p>今日は森の奥で美味しそうなクローバーを見つけました。<span class="highlight">とても甘くて新鮮</span>で、お腹いっぱい食べることができました。</p> <p class="timestamp">2025年5月15日 午前10時</p> </article>
<article class="diary-entry squirrel"> <h2>りすのちびちゃん</h2> <h3>どんぐり集めの成果</h3> <p>昨日の夜から探していたどんぐりを<span class="highlight">20個</span>も見つけました。冬に向けての準備が順調に進んでいます。</p> <p class="timestamp">2025年5月15日 午後2時</p> </article>
<article class="diary-entry bear"> <h2>くまのぽんちゃん</h2> <h3>川でのお魚タイム</h3> <p>今日は川で大きな鮭を捕まえることができました。<span class="highlight">今年一番の大物</span>で、とても嬉しかったです。</p> <p class="timestamp">2025年5月15日 午後4時</p> </article> </main>
<footer> <p>🌲 森の仲間たちの日記帳 - 自然とともに暮らす仲間たちの記録 🌿</p> </footer></body></html>/* TODO: 上記の指示＜A＞〜＜F＞に従ってCSSを記述してください */解答例を見る
/* ＜A＞ページ全体のベーススタイル */body { background-color: #faf8f3; color: #333333; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 16px; line-height: 1.6; margin: 0; padding: 0;}
/* ＜B＞ヘッダーのスタイリング */header { text-align: center; padding: 40px 20px; background-color: #f0f4f0;}
h1 { font-size: 36px; font-weight: bold; color: #2d5a2d; margin: 0 0 10px 0;}
.subtitle { font-style: italic; font-size: 14px; color: #666666; margin: 0;}
/* ＜C＞日記エントリーのベーススタイル */main { max-width: 800px; margin: 0 auto; padding: 20px;}
.diary-entry { background-color: #ffffff; margin: 30px 0; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
/* ＜D＞動物別のテーマカラー */.rabbit { border-left: 5px solid #ff6b9d;}
.rabbit h2 { color: #ff6b9d;}
.squirrel { border-left: 5px solid #ff8c42;}
.squirrel h2 { color: #ff8c42;}
.bear { border-left: 5px solid #8b4513;}
.bear h2 { color: #8b4513;}
/* ＜E＞文字の階層とアクセント */h2 { font-size: 24px; font-weight: bold; margin: 0 0 15px 0;}
h3 { font-size: 18px; font-weight: 600; color: #555555; margin: 0 0 15px 0;}
p { margin: 15px 0; line-height: 1.8;}
.highlight { background-color: #fff2cc; font-weight: bold; padding: 2px 4px; border-radius: 3px;}
.timestamp { font-size: 14px; color: #888888; font-style: italic; text-align: right; margin-top: 20px;}
/* ＜F＞フッターのスタイリング */footer { background-color: #e8ebe8; text-align: center; padding: 30px 20px; margin-top: 40px;}
footer p { margin: 0; color: #666666; font-size: 14px;}設計のポイント：
- 色の一貫性: 各動物に専用の色を割り当てて視覚的な区別を明確に
- 階層構造: フォントサイズと太さで情報の重要度を表現
- 読みやすさ: 適切な行間とコントラストで読書体験を向上
- 余白の活用: padding と margin で要素間の関係を明確に
- アクセシビリティ: 十分なコントラスト比を確保して読みやすさを重視
よい色とフォントの組み合わせのポイント
Section titled “よい色とフォントの組み合わせのポイント”効果的な色とフォントの組み合わせを作るためのガイドライン：
デザインチェックリスト:
- ✅ 背景色と文字色のコントラストが十分
- ✅ 使用する色は3-5色程度に制限
- ✅ フォントファミリーは内容に適している
- ✅ 文字サイズに階層がある（h1 > h2 > p）
- ✅ 行間が読みやすい（1.5-1.8程度）
- ✅ 重要な情報は太字や色で強調されている
CSS色の指定方法 MDNで詳しく学ぶ
CSSフォント関連プロパティ MDNで詳しく学ぶ
チェックポイント！
- color プロパティで文字色を設定できる
- background-color プロパティで背景色を設定できる
- 色名、16進数、RGB関数での色指定方法を理解した
- font-family プロパティでフォントを指定できる
- font-size プロパティで文字サイズを調整できる
- font-weight プロパティで文字の太さを変更できる
- line-height プロパティで行間を調整できる
- 読みやすいコントラストを意識したデザインができる
Footnotes
Section titled “Footnotes”-
CSSの代表的なプロパティ ↗ - esa#1042 ↩ ↩2
最後まで読み終えました！ えらい！
CSSは魔法みたい！同じ文章でも、色やフォントを変えるだけで印象がガラッと変わるよ。