概要

text-align は、テキストやインライン要素の水平位置（整列）を指定するCSSプロパティです。左揃え・中央揃え・右揃え・両端揃えなどが選べます。

基本的な使い方

See the Pen text-alignについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

/* 左揃え（初期値） */
p {
  text-align: left;
}

/* 中央揃え */
h1 {
  text-align: center;
}

/* 右揃え */
.footer {
  text-align: right;
}

/* 両端揃え（新聞のような見た目） */
.article {
  text-align: justify;
}

要素の中に含まれるテキストやインライン要素の配置位置を決めるために使います。ブロック要素（例：<p> や <div>）に適用するのが一般的です。

出力される内容の例

<div style="text-align: center;">
  このテキストは中央揃えで表示されます。
</div>

役割とメリット（定義リスト形式）

視認性の向上

見出しや注目させたいテキストを中央揃えにすることで、ユーザーの視線を引きつけやすくなります。

デザインの一貫性

コンテンツの整列位置を統一することで、読みやすく整理された印象を与えることができます。

多言語対応

LTR（左から右）とRTL（右から左）の言語切替時も、動的に揃え方向を変える工夫が可能です。

柔軟な表現

テキストの見せ方を状況に応じて柔軟に調整でき、プレゼン資料のようなレイアウトも実現可能です。

注意点

• text-align は要素そのものではなく、中のインラインコンテンツの位置に影響します。
• 画像の中央揃えには別途 display: block; margin: auto; などの設定が必要な場合があります。
• justify（両端揃え）は、文中に十分なテキストがないと不自然に見えることがあります。
• 親要素に適用され、子要素に継承されるため、ネスト構造に注意しましょう。

まとめ

text-align は、文章やコンテンツの整列を制御するための基本プロパティで、Webサイト全体のデザインや可読性に大きく影響します。特に見出し・フッター・本文など、テキスト配置を意識する場面では欠かせないプロパティです。