【第4回】文字の装飾をしてみよう｜CSS初心者ノート

🖋 文字を太くしてみよう（font-weight）

文字の太さは font-weight プロパティで指定します。

p {
  font-weight: bold;
}

👉 この場合、段落（p要素）の文字が太字で表示されます。

数値でも指定できて、100〜900までの間で調整可能です。

p {
font-weight: 700;
}

値	意味
100	一番細い
400	標準（normal）
500〜600	やや太め
700	太字（bold）
900	とても太い

💡慣れてきたら、500（やや太め）や900（極太）など細かく指定もできます。
初心者さんのうちは、まず「normal（普通）」「bold（太字）」の2種類を覚えておけばOKです👌

---

✍️ 文字を斜体にしてみよう（font-style）

文字を斜体にしたい場合は font-style を使います。

p {
  font-style: italic;
}

👉 これで文字が右に少し傾いた斜体になります。
強調したい部分などに使うと効果的です。

---

🔗 下線や取り消し線をつけよう（text-decoration）

文字に線をつけるときは text-decoration プロパティを使います。

p {
  text-decoration: underline;
}

👉 下線（アンダーライン）が表示されます。

値	表示例
underline	下線
overline	上線
line-through	取り消し線
none	線なし（初期値）

---

💻 実際のコード例

HTML部分：

<p class="bold">太字のテキストです。</p>
<p class="italic">斜体のテキストです。</p>
<p class="underline">下線をつけたテキストです。</p>
<p class="cancel">取り消し線のテキストです。</p>

CSS部分：

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

.cancel {
  text-decoration: line-through;
}

---

👀 実際の表示結果

---

✅ ポイントまとめ

• 文字を太く → font-weight
• 文字を斜体に → font-style
• 下線や取り消し線 → text-decoration
• 組み合わせることで読みやすく、デザイン性アップ✨

---

HTMLやデザインに興味がある方に、おすすめリンクです👇

---

📌 次回予告

【第5回】テキストの位置を整えよう
→ text-align と line-height を使って、文字の位置や行間を整えていきます🧭

---

🔖 この回で出てきたプロパティ

#font-weight #font-style #text-decoration