レッスン2：文字のスタイル
🎯 このレッスンで学ぶこと
- colorで文字色を変えられます。
- font-sizeで文字サイズを変えられます。
- font-familyでフォントを指定できます。
- text-alignで文字の揃え方を変えられます。
📖 前回の復習（レッスン1）
- CSSはウェブページの見た目を整える言語
セレクタ { プロパティ: 値; }の形で書く- CSSは別ファイルに書いて
<link>タグでHTMLに読み込む
📖 導入 — 文字だけでデザインは変わる
前のレッスンで背景色と文字色を変えましたね。実は、文字のスタイルを変えるだけで、ページの印象はガラッと変わります。フォントを丸くしたり、サイズを大きくしたり、中央に揃えたり…このレッスンで、文字まわりのCSSをマスターしましょう！
📝 文字スタイルのプロパティ
文字色：
色の指定方法は3種類あります。
| 書き方 | 例 | 特徴 |
|---|---|---|
| 色の名前 | red / skyblue / tomato | 簡単だが種類が限られる |
| HEX（16進数） | #ff5733 | 細かく色を指定できる |
| RGB | rgb(255, 87, 51) | 赤・緑・青の強さで指定する |
#RRGGBB の形で赤・緑・青の強さを表します。#ff0000 は赤、#0000ff は青、#ffffff は白です。
文字サイズ：
h1 { font-size: 36px; }
p { font-size: 16px; }▶ プレビュー
・本文:
16px（ブラウザのデフォルト）・小さい注釈:
12px〜14px・見出し:
24px〜36px14px 未満は読みにくいので避けましょう。
フォント：
複数書いておくと、最初のフォントが使えない場合に次のフォントが使われます。最後の sans-serif はブラウザの標準フォントへの予備指定です。
body {
font-family: "Hiragino Sans", "Meiryo", sans-serif;
}▶ プレビュー
太字：
h2 { font-weight: bold; }
h1 { text-align: center; }
p { text-align: left; }
p { line-height: 1.8; }line-height は行と行の間隔（行間）を指定するプロパティです。値は単位なしの数値（例：1.8）で指定するのがおすすめで、文字サイズの1.8倍の行間になります。
▶ プレビュー
Googleフォントを使う
HTMLの <head> に <link> タグを追加し、CSSで font-family に指定します。
パソコンにインストールされていないフォントでも、Googleフォントを使えばどのデバイスでも同じフォントで表示できます。
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">body {
font-family: "Noto Sans JP", sans-serif;
}・Google Fonts は無料で使えるフォント集。インターネットから読み込みます
・
<link> タグを <head> に追加するだけで使えます・まずは
sans-serif（ゴシック体・角ばった文字）と serif（明朝体・はねのある文字）の違いを覚えればOK！
px の代わりに rem を使うと、ユーザーがブラウザの文字サイズ設定を変えたときに自動で拡大縮小されます。1rem = ブラウザのデフォルト文字サイズ（通常16px）。アクセシビリティに配慮したサイトでは rem が推奨されます。
テキストに装飾線をつけたり消したりするプロパティです。
/* リンクの下線を消す */
a {
text-decoration: none;
}
/* 取り消し線をつける */
.old-price {
text-decoration: line-through;
color: #999;
}▶ プレビュー
リンクのデフォルトの下線を消したいときや、セール価格の表示に使えます。underline で下線を追加することもできます。
💻 やってみよう！
VS Codeで my-practice フォルダの index.html と style.css を開き、以下のように書き換えてください。（lesson1で作ったファイルを上書きして使います）書き終えたら index.html をダブルクリックしてブラウザで確認しましょう。
<!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;
}▶ プレビュー
自由課題:
h1の色を好きな色に変えてみようfont-sizeを48pxや12pxに変えて違いを確認しようtext-align: centerをrightに変えてみようpにline-height: 2.5を追加して行間の変化を確認しようtext-decoration: line-throughで取り消し線を試してみよう
⚠️ よくあるミス
- color と background-color を混同する：
colorは文字色、background-colorは背景色です。文字の色を変えたいのに背景色が変わってしまったら、プロパティ名を確認しましょう。 - font-family のフォント名を引用符で囲み忘れる：スペースを含むフォント名（例：
"Noto Sans JP"）は引用符で囲む必要があります。囲まないとフォントが適用されません。 - px を書き忘れる：
font-size: 24だけでは動きません。font-size: 24pxのように単位を忘れずに書きましょう。
📌 まとめ
| プロパティ | 役割 | 例 |
|---|---|---|
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 |
line-height | 行間 | line-height: 1.8 |
- ✅ Googleフォントは
<link>タグで読み込んでfont-familyで指定する - ✅
font-familyは複数書いて予備のフォントを指定しておくのがおすすめ - ✅
text-decoration: noneでリンクの下線を消せる - ✅
text-decoration: line-throughで取り消し線をつけられる - ✅
line-heightで行間を調整すると読みやすくなる
🎯 次のレッスンの準備：クラスセレクタ
次のレッスンでは、HTMLの class 属性を使ったセレクタが登場します。「.（ドット）+ クラス名」で、そのクラスがついた要素にスタイルを当てられます。
<!-- HTML --> <div class="card">カードの内容</div>.card { background-color: white; border-radius: 8px; }.card は「class="card" がついた要素すべて」を意味します。
🚀 次のレッスンへ
次のレッスンでは、背景と枠線を使ってデザインの幅を広げる方法を学びます！
このレッスンは役に立ちましたか？
フィードバックありがとうございます！
⚠️ よくあるエラー
- スマホで表示が小さい — viewport meta タグがない