Webページを作成する際、テキストの表示位置（寄せ方）はデザインや読みやすさに大きな影響を与えます。文章を左寄せ・中央寄せ・右寄せにするだけで、印象や情報の伝わり方が変わります。

この記事では、CSSのtext-alignプロパティを使って、テキストの表示位置を変更する方法を初心者向けにわかりやすく解説します。

text-alignとは？

text-alignは、行内要素（テキストやインライン画像）の水平方向の配置を指定するためのCSSプロパティです。

代表的な値は以下のとおりです：

• left：左寄せ（初期値）
• center：中央寄せ
• right：右寄せ
• justify：両端揃え

それでは、それぞれの使い方を見ていきましょう。

左寄せ（left）にする方法

左寄せはブラウザのデフォルト設定ですが、明示的に指定したい場合は以下のようにします：

.left-text {
  text-align: left;
}

<div class="left-text">
  これは左寄せのテキストです。
</div>

特に他の位置指定と切り替えたいときに活用されます。

中央寄せ（center）にする方法

テキストを中央揃えにしたい場合は、次のように指定します：

.center-text {
  text-align: center;
}

<div class="center-text">
  これは中央寄せのテキストです。
</div>

見出しやボタンの説明文、装飾的な要素に使うと効果的です。

右寄せ（right）にする方法

右寄せは、日付や署名などを右側に寄せたいときに使います。

.right-text {
  text-align: right;
}

<div class="right-text">
  これは右寄せのテキストです。
</div>

ちょっとした整列にも便利なスタイルです。

両端揃え（justify）とは？

text-align: justify;は、行の左右を同時に揃えて読み物風の整った段落に見せる手法です。

.justify-text {
  text-align: justify;
}

新聞のような整ったレイアウトを作りたいときに活用されますが、短いテキストには不向きです。

スマホ対応も意識しよう

レスポンシブ対応のために、画面サイズごとにtext-alignを切り替えることもできます：

@media screen and (max-width: 768px) {
  .center-text {
    text-align: left;
  }
}

これにより、スマホでは中央寄せの文章を左寄せに切り替えることができ、読みやすさが向上します。

まとめ

CSSのtext-alignプロパティを使えば、テキストの表示位置を自由に調整することができます。文章の内容や用途に応じて、左・中央・右・両端揃えを使い分けることで、見た目にもわかりやすく、美しいレイアウトが実現できます。

読みやすさとデザインのバランスを考慮して、効果的なテキスト配置を心がけましょう！