CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － text-align最適化

Web APP CSS
スポンサーリンク

text-align は「文章の重心」を決めるプロパティ

文章は“どこに揃えるか”だけで読みやすさや印象が大きく変わります。
text-align を最適化すると、見出し・本文・UI ラベル・ボタン・カード など、あらゆるテキストが整い、デザインの完成度が一気に上がります。

ここでは CSS と Tailwind CSS の両方で、
初心者でも迷わないように例題を交えて丁寧に解説します。

text-align の基本種類とイメージ

left

左揃え（日本語・英語の本文で最も自然）

center

中央揃え（見出し・短いテキスト・ボタンに最適）

right

右揃え（価格・日付・数値などで使う）

justify

両端揃え（新聞のように左右を揃える）

例1：本文は左揃えが最も読みやすい（left）

CSS 版

p {
  text-align: left;
  line-height: 1.7;
}
CSS

Tailwind 版

<p class="text-left leading-relaxed">
  本文は左揃えが最も読みやすく、自然な視線の流れになります。
</p>
HTML

深掘りポイント
日本語も英語も、長文は左揃えが最も読みやすいです。
特にスマホでは中央揃えの本文は読みにくくなるため避けるのが基本。

例2：見出しは中央揃えで“強調”できる（center）

CSS 版

h1 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}
CSS

Tailwind 版

<h1 class="text-center text-3xl font-bold">
  セクションタイトル
</h1>
HTML

深掘りポイント
中央揃えは「短いテキスト」「タイトル」「キャッチコピー」に向いています。
視線が中央に集まるため、印象が強くなります。

例3：価格や数値は右揃えが最適（right）

CSS 版

.price {
  text-align: right;
  font-size: 1.5rem;
  font-weight: 700;
}
CSS

Tailwind 版

<p class="text-right text-xl font-bold">
  ¥12,800
</p>
HTML

深掘りポイント
数値は桁が揃うと読みやすくなるため、右揃えが最適。
EC サイト・管理画面・表などで必須のテクニックです。

例4：両端揃えで“新聞のような整った文章”を作る（justify）

CSS 版

.text-block {
  text-align: justify;
  line-height: 1.8;
}
CSS

Tailwind 版

<p class="text-justify leading-relaxed">
  両端揃えは文章の左右が揃うため、新聞や雑誌のような整った印象になります。
</p>
HTML

深掘りポイント
justify は見た目が整う反面、
単語間のスペースが不自然に広がることがあるため、
長文の本文では慎重に使う必要があります。

例5：カードのタイトルは中央揃えで“まとまり感”を出す

CSS 版

.card-title {
  text-align: center;
  font-weight: 600;
}
CSS

Tailwind 版

<h3 class="text-center font-semibold">
  商品タイトル
</h3>
HTML

深掘りポイント
カードの中身は中央揃えにすると、
コンパクトでまとまりのあるデザインになります。

例6：フォームラベルは左揃えが最適（UI の基本）

CSS 版

label {
  text-align: left;
  display: block;
  margin-bottom: 0.25rem;
}
CSS

Tailwind 版

<label class="block text-left mb-1">
  メールアドレス
</label>
HTML

深掘りポイント
フォームラベルは左揃えが最も読みやすく、
入力欄との視線移動が自然になります。

例7：ボタンのテキストは中央揃えが基本

CSS 版

.button {
  text-align: center;
  padding: 0.75em 1.5em;
}
CSS

Tailwind 版

<button class="text-center px-6 py-3 bg-blue-600 text-white rounded">
  送信
</button>
HTML

深掘りポイント
ボタンは中央揃えにすることで、
「押しやすい」「まとまって見える」印象になります。

text-align と UI の関係（ここが一番大事）

1. 長文は左揃えが最も読みやすい

中央揃えの本文は視線が迷いやすく、読みにくくなります。

2. タイトル・短文は中央揃えが強い

キャッチコピーや見出しに最適。

3. 数値は右揃えで桁が揃う

EC・管理画面では必須。

4. justify は“整うが不自然になりやすい”

雑誌風デザインには向くが、Web では慎重に使う。

5. UI ラベルは左揃えが基本

フォームの読みやすさが大きく変わる。

Tailwind の text-align クラス一覧

text-left
text-center
text-right
text-justify

Tailwind は text-align をシンプルに扱えるため、
レスポンシブにも簡単に対応できます。

例：

<p class="text-left md:text-center">
  スマホでは左揃え、PC では中央揃え
</p>
HTML

実務テンプレート：用途別 text-align 設計

見出し（中央）

<h2 class="text-center text-2xl font-bold">
  セクションタイトル
</h2>
HTML

本文（左）

<p class="text-left leading-relaxed">
  本文テキストがここに入ります。
</p>
HTML

価格（右）

<p class="text-right text-xl font-semibold">
  ¥12,800
</p>
HTML

カード（中央）

<div class="text-center p-4 bg-white rounded shadow">
  <h3 class="font-semibold">商品名</h3>
  <p class="text-gray-600">説明文</p>
</div>
HTML

まとめ

text-align は
文章の重心を決めるタイポグラフィの基本技術 です。

ポイントは次の通りです。

  • 本文 → 左揃え
  • 見出し・短文 → 中央揃え
  • 数値 → 右揃え
  • 新聞風 → justify
  • UI ラベル → 左揃え
  • Tailwind は text-left / text-center / text-right / text-justify で簡単

スポンサーリンク
タイトルとURLをコピーしました