CSSのtext-alignでテキストの水平配置を指定する方法をわかりやすく解説

2024.09.15
スポンサーリンク

text-alignプロパティは、要素内のテキストの水平位置を指定します。主にブロック要素に適用され、インライン要素やテキストをどのように配置するかを制御します。

スポンサーリンク

text-alignの値とその効果の一覧

  • left: テキストを左揃えにします。
  • right: テキストを右揃えにします。
  • center: テキストを中央揃えにします。
  • justify: テキストを両端揃えにします。

注意点と関連情報

text-alignはブロックレベルの要素に対して適用されるため、divやp、h1などに使用されます。また、インライン要素（spanなど）には適用されません。justifyはテキストの間隔を調整して、両端を揃えることができますが、単語間のスペースが広がりすぎることがありますので、長い文章や段落に対して効果的に使用されます。

text-alignが効かない時の原因と対策

ブロックレベル要素に適用されていない

text-alignプロパティは、インライン要素やインライン要素を含むブロックレベル要素（<div>, <p>, <h1>など）に適用されます。ブロックレベルの要素に適用しない場合、text-alignは効果がありません。

対策: text-alignはブロックレベル要素に適用されるプロパティであるため、適用する要素がインライン要素のみの場合、ブロックレベルの要素（例: <div>, <p>）を使用して、その要素内にtext-alignを設定します。例えば、<div style="text-align: center;">のように指定します。

インライン要素の内容はtext-alignに影響されない

text-alignプロパティは、インライン要素の中でのテキストやインライン要素自体の配置を制御しますが、ブロック要素には影響を与えません。そのため、<span>や<a>などのインライン要素にtext-alignを適用しても、親要素がブロック要素でなければ効果がありません。

対策: テキストやインライン要素を中央揃えや右揃えにしたい場合、親要素がブロックレベルの要素であることを確認し、そこにtext-alignを適用します。例えば、<p style="text-align: right;">のように親要素に設定します。

フレックスボックスやグリッドレイアウトが使用されている

フレックスボックスやグリッドレイアウトを使用している場合、要素の配置はjustify-contentやalign-itemsなどのプロパティで制御されるため、text-alignが無視されることがあります。

対策: フレックスボックスやグリッドレイアウトを使用している場合、text-alignの代わりにjustify-contentやalign-itemsを使用して要素の配置を調整します。たとえば、フレックスボックスで中央揃えにしたい場合は、justify-content: center;を使用します。

親要素のdirectionが影響している

親要素のdirectionプロパティがrtl（右から左）に設定されている場合、text-align: leftが右揃え、text-align: rightが左揃えのように、反転して機能することがあります。

対策: directionプロパティの設定を確認し、必要に応じてtext-alignの値を調整します。例えば、direction: rtl;の場合は、text-align: right;が左揃えになることを意識して配置を調整します。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 100%;
  background-color: #f9f9f9;
}

.css-sample-text {
  border: 1px solid #999;
  padding: 10px;
}

text-align: left

テキストを左揃えにします。デフォルトの配置です。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-left">
    これは左揃えのテキストです。
  </div>
</div>

CSSコード

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

表示結果

これは左揃えのテキストです。

text-align: right

テキストを右揃えにします。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-right">
    これは右揃えのテキストです。
  </div>
</div>

CSSコード

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

表示結果

これは右揃えのテキストです。

text-align: center

テキストを中央揃えにします。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-center">
    これは中央揃えのテキストです。
  </div>
</div>

CSSコード

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

表示結果

これは中央揃えのテキストです。

text-align: justify

テキストを両端揃えにします。両端が整った形で表示されますが、間隔が広がることがあります。ただし、1行の場合は適用されません。その場合はtext-align-last:justifyと併用します。

HTMLコード

<div class="css-sample-container">
  <div class="css-sample-text css-sample-text-justify">
    これは両端揃えのテキストです。各行が両端に揃えられ、見た目が整えられます。
  </div>
</div>

CSSコード

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

表示結果

これは両端揃えのテキストです。各行が両端に揃えられ、見た目が整えられます。

まとめ

  • text-alignは、要素内のテキストの水平配置を指定します。
  • left、right、center、justifyの4つの主要な値があります。
  • justifyは、両端揃えでテキストを整えますが、行間のスペースが広がりすぎることがあります。
  • テキストの配置は、読みやすさやデザインに影響するため、適切に選択することが重要です。
スポンサーリンク