CSSのtext-alignプロパティ：テキスト配置の基本と応用

CSSのtext-alignプロパティは、テキストの水平方向の配置を制御するために使用されます。
このプロパティを活用すると、コンテンツの見た目を整え、デザイン全体の統一感を高めることができます。
本記事では、text-alignの基本的な使い方から、
応用的なテクニックやベストプラクティスまでを解説します。

text-alignプロパティとは？

text-alignプロパティは、ブロック要素内のインラインコンテンツ（テキストや画像など）を
水平方向に配置するために使用されます。

基本構文

selector {
  text-align: value;
}

指定可能な値

• left：左揃え（デフォルト）
• right：右揃え
• center：中央揃え
• justify：両端揃え
• start：書字方向に基づく開始位置に揃える
• end：書字方向に基づく終了位置に揃える

基本的な使い方

左揃え

leftは、テキストを要素内の左端に揃えます。これは多くの言語でデフォルトの配置です。

コード例

p {
  text-align: left;
}

右揃え

rightは、テキストを要素内の右端に揃えます。

コード例

p {
  text-align: right;
}

用途

• 数値や価格を右揃えにする場合
• 特定のデザイン要件でテキストを右端に揃える場合

中央揃え

centerは、テキストを要素内で中央に配置します。

コード例

p {
  text-align: center;
}

用途

• 見出しやキャッチコピーを中央に配置する場合
• 特定のデザインエリアでテキストを目立たせたい場合

両端揃え

justifyは、テキストを左右両端に均等に配置します。
新聞や雑誌のような見た目を実現できます。

コード例

p {
  text-align: justify;
}

注意点

• 不自然なスペースが発生する場合があります。

応用例とデザインテクニック

レスポンシブデザインでの活用

画面サイズに応じてテキストの配置を変更できます。

コード例

p {
  text-align: left;
}

@media (max-width: 768px) {
  p {
    text-align: center;
  }
}

画像とテキストを組み合わせた配置

画像を含むインライン要素の配置を調整できます。

コード例

div {
  text-align: center;
}

img {
  display: inline-block;
}

日本語テキストでの両端揃え

日本語の長文に両端揃えを適用することで、美しい段落が作れます。

コード例

p {
  text-align: justify;
  text-justify: inter-word;
}

ポイント

• text-justify: inter-word;を使用すると単語間のスペースが調整されます。

text-alignの特別な値

startとend

startとendは、書字方向（LTR: 左から右、RTL: 右から左）に基づいてテキストを配置します。

コード例

p {
  text-align: start;
}

用途

• 国際化対応サイトでのテキスト配置に便利。

グリッドレイアウトやフレックスボックスと組み合わせ

text-alignはグリッドレイアウトやフレックスボックスで使用すると、より効果的な配置が可能です。

コード例

.container {
  display: grid;
  place-items: center;
  text-align: center;
}

よくある問題と解決策

Q1. テキストが中央揃えにならないのはなぜ？

text-alignはブロック要素内のインライン要素に適用されます。text-alignが適用される要素が正しいか確認してください。

Q2. 両端揃えで不自然なスペースができる場合は？

word-spacingやletter-spacingを調整して自然な見た目を実現します。

ベストプラクティス

目的に応じた配置を選ぶ

見出し：centerで注目を集める
段落：justifyで均等配置
サイドバーのテキスト：rightで整列

可読性を意識する

可読性を損なわないために、行間（line-height）や文字間（letter-spacing）も併せて調整します。

例

p {
  text-align: justify;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

まとめ

CSSのtext-alignプロパティは、テキストの配置を簡単にコントロールできる便利なプロパティです。
本記事で紹介した基本的な使い方から応用例を参考にして、
より美しいウェブデザインを作成してみてください。

適切なテキスト配置を選ぶことで、サイトの見た目だけでなく、ユーザー体験の向上にもつながります。

Favorite