レッスン2：文字のスタイル

📖 導入 — 文字だけでデザインは変わる

前のレッスンで背景色と文字色を変えましたね。実は、文字のスタイルを変えるだけで、ページの印象はガラッと変わります。フォントを丸くしたり、サイズを大きくしたり、中央に揃えたり…このレッスンで、文字まわりのCSSをマスターしましょう！

📝 文字スタイルのプロパティ

文字色：`color`

色の指定方法は3種類あります。

書き方	例	特徴
色の名前	`red` / `skyblue` / `tomato`	簡単だが種類が限られる
HEX（16進数）	`#ff5733`	細かく色を指定できる
RGB	`rgb(255, 87, 51)`	赤・緑・青の強さで指定する

文字サイズ：`font-size`

h1 { font-size: 36px; }
p  { font-size: 16px; }

フォント：`font-family`

複数書いておくと、最初のフォントが使えない場合に次のフォントが使われます。最後の sans-serif はブラウザの標準フォントへの予備指定です。

body {
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
}

太字：`font-weight` / 文字の揃え：`text-align`

h2 { font-weight: bold; }
h1 { text-align: center; }
p  { text-align: left; }

Googleフォントを使う

HTMLの <head> に <link> タグを追加し、CSSで font-family に指定します。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

body {
  font-family: "Noto Sans JP", sans-serif;
}

💻 やってみよう！

index.html と style.css を以下のように書いてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>文字のスタイル練習</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>わたしの自己紹介</h1>
    <h2>趣味</h2>
    <p>わたしの趣味はゲームと読書です。</p>
    <h2>好きな食べ物</h2>
    <p>いちばん好きな食べ物はラーメンです。</p>
  </body>
</html>

body {
  font-family: "Noto Sans JP", sans-serif;
}

h1 {
  color: #3a86ff;
  font-size: 32px;
  text-align: center;
}

h2 {
  color: #fb5607;
  font-weight: bold;
}

p {
  font-size: 16px;
  color: #333333;
}

📌 まとめ

プロパティ	役割	例
`color`	文字色	`color: #3a86ff`
`font-size`	文字サイズ	`font-size: 24px`
`font-family`	フォント（書体）	`font-family: "Noto Sans JP", sans-serif`
`font-weight`	太さ	`font-weight: bold`
`text-align`	文字の揃え	`text-align: center`

✅ Googleフォントは <link> タグで読み込んで font-family で指定する
✅ font-family は複数書いて予備のフォントを指定しておくのがおすすめ

🚀 次のレッスンへ

次のレッスンでは、背景と枠線を使ってデザインの幅を広げる方法を学びます！

🔍 もっと調べてみよう：「CSS 文字スタイル font-size」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！