フォントとクラス · Martinとコード

サイトにちゃんとしたフォントを選び、CSS で一番便利なクラスを学ぼう。

見てみよう：もっと良いフォント

ブラウザのデフォルトフォントはつまらない。1ルールでページ全体を変えよう：

body {
  font-family: Verdana, Arial, sans-serif;
}

font-family は希望リスト：「Verdana を使う。なければ Arial。それもなければ sans-serif 系のフォント（sans-serif）。」

ほぼ全パソコンにあるフォント：Verdana、Georgia（セリフ、長文向き）、Trebuchet MS、Courier New（タイプライター風）。いろいろ試して——フォントを変えるだけでサイトが激変する。

見てみよう：クラス

今までは すべての 段落を一度にスタイルできる。でも1つだけ違う見た目にしたい——重要なお知らせみたいに。クラス の出番：

HTML でタグにクラス名を付ける：

<p class="notice">No school tomorrow!</p>

CSS ではドットで指定：

.notice {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

background-color – その要素だけの背景色
border – 枠：太さ、スタイル、色
padding – 文字と枠の間の余白（文字が端にくっつかない）
border-radius – 角丸

クラスは好きなだけ要素に付けられる——全部同じ服を着る。タグの制服みたい。

やってみよう 💪

body の font-family でサイト全体のフォントを設定。
プロジェクトに合うクラスを1つ以上考え、2か所で使う。

🏫 学校サイト——答え（「news」クラス）

<p class="news">📢 No school on Friday – teacher training day!</p>
<p class="news">📢 Paper drive starts Monday.</p>

body {
  font-family: Verdana, Arial, sans-serif;
}

.news {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

🙋 個人サイト——答え（「favorite」クラス）

<p class="favorite">⭐ Favorite game: Minecraft</p>
<p class="favorite">⭐ Favorite food: pancakes</p>

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.favorite {
  background-color: #ffedd5;
  border: 2px solid #ea580c;
  padding: 10px;
  border-radius: 8px;
}

🌍 旅行日記——答え（「tip」クラス）

<p class="tip">🎒 Trip tip: head up the mountain early, before it gets hot.</p>
<p class="tip">🎒 Tip: bring water shoes to the beach!</p>

body {
  font-family: Georgia, "Times New Roman", serif;
}

.tip {
  background-color: #dcfce7;
  border: 2px solid #16a34a;
  padding: 10px;
  border-radius: 8px;
}

⚽ クラブサイト——答え（「win」クラス）

<li class="win">Eagles – Hawks 3 : 1</li>
<li>Falcons – Eagles 2 : 2</li>
<li class="win">Eagles – Wildcats 4 : 0</li>

body {
  font-family: Verdana, Arial, sans-serif;
}

.win {
  background-color: #dcfce7;
  font-weight: bold;
}

勝利はすぐ緑でハイライト——本物の順位表みたい！

✅

確認： サイトに新しいフォントがあり、クラス付きの要素が他と違う見た目になってる。

このレッスンのまとめ

body の font-family でサイト全体のフォントを変更。
クラスは名札：HTML で class="名前"、CSS で .名前 { ... }。
padding、border、border-radius で普通の段落がカラフルなバッジに。