【第5回】テキストの位置を整えよう｜CSS初心者ノート

🧭 テキストの位置を変えてみよう（text-align）

文字の「横方向の位置」を指定するのが text-align プロパティです。

p {
  text-align: center;
}

👉 これで、段落（p要素）のテキストが中央寄せになります。

主な指定方法を一覧にしておきます👇

値	意味
left	左寄せ（初期値）
center	中央寄せ
right	右寄せ
justify	両端揃え（新聞のように整列）

💡見出しやタイトル部分は中央寄せにすると見やすく、本文は左寄せのままが読みやすいです👌

---

📏 行間を調整してみよう（line-height）

文字の「縦方向の間隔（行間）」を設定するのが line-height プロパティです。

p {
  line-height: 1.8;
}

👉 この場合、文字と文字の行間が少し広がって、読みやすくなります。

どれを使うか迷ったときの目安はこちら💡

指定方法	例	意味
数値	1.8	行の高さを1.8倍にする
単位付き	30px	1行の高さを30ピクセルに固定する
パーセンテージ	180%	文字サイズの180%分の高さにする

💡文章がぎゅっと詰まりすぎて見づらいときは、
1.6〜1.8 くらいを目安に調整してみましょう。

---

💻 実際のコード例

ここまでの内容を踏まえて、実際に書いてみましょう✍️

HTML部分：

<h2 class="center">中央寄せの見出しです</h2>
<p class="space">
  行間を広くして読みやすくした段落です。<br>
  少し余裕があると、文字がゆったり見えます。
</p>

CSS部分：

.center {
  text-align: center;
}

.space {
  line-height: 1.8;
}

---

👀 実際の表示結果

---

✅ ポイントまとめ

• 横の位置を変える → text-align
• 行間を調整する → line-height
• 読みやすいデザインには「余白」が大切✨

---

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

---

📌 次回予告

【第6回】背景をつけよう
→ background-color と background-image を使って、文字やボックスの背景をおしゃれに彩ります🎨

---

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

#text-align #line-height