トップページの中の プロパティの中の Tのプロパティ一覧の中の text-align

text-align

  • 最終更新:2009年11月23日 13:08

text-alignプロパティは、テキストをどのように整列させるかを指定します。

右寄せにしたり、中央揃えにしたい場合に活用します。
また、有名なバグの一つで、IE5.xやIE6の互換モードではこのプロパティの値をcenterにすると、ブロックレベル要素までセンタリングされてしまいます。
本来ブロックレベル要素をセンタリングするにはmargin: 0 auto;のような指定をする必要が有りますが、IE5.xやIE6の互換モードではセンタリングされないため、ブロックレベル要素のセンタリング目的で使う事も有ります。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

left|right|center|justify|inherit
初期値
directionプロパティの値に依存
適用される要素
ブロックレベル要素、テーブルのセル要素、インラインブロック要素
継承
します
パーセント値
N/A
メディア
visual

値の解説

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

text-alignのサンプル

.item {
  width: 480px;
  margin: 20px;
  padding: 10px 10px 1px;
  background: #ccc;
  text-align: center;
}

p {
  padding: 10px;
  text-align: left;
  background: #fff;
}

p.leftSample {
  text-align: left;
}

p.rightSample {
  text-align: right;
}

p.centerSample {
  text-align: center;
}

p.justifySample {
  text-align: justify;
}
<div class="item">
<p class="leftSample">text-alignのサンプルです。</p>
<p class="rightSample">text-alignのサンプルです。</p>
<p class="centerSample">text-alignのサンプルです。</p>
<p class="justifySample">text-alignのサンプルです。</p>
</div>

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

text-alignのサンプルです。

text-alignのサンプルです。

text-alignのサンプルです。

text-alignのサンプルです。

justifyは1行の時には特に変化が有りません。
複数行になった場合以下のようになります。

サンプルのブラウザ上の表示

こういう部分に必要なサンプルテキストがとっさに浮かばなくて、長文作成だるいよなーとか思っちゃいますね。自由に使えて引用じゃなくて、読まれても特に問題のないテキストって意外と難しい。難しいがゆえに「ダミーテキスト」とか「サンプルテキスト」を繰り返していっぱい並べたりしますよね。でもアレだと見た目が悪かったり実際と印象が違い過ぎたり。まぁそんな時の為に使えるダミーテキストを配布しているサイトなんかも有りますが、そういえば使った事がないなーと思った今日この頃。

When justifying text, the user agent takes the remaining space between the ends of a line's contents and the edges of its line box, and distributes that space throughout its contents so that the contents exactly fill the line box. If the 'letter-spacing' and 'word-spacing' property values allow it, the user agent may also distribute negative space, putting more content on the line than would otherwise fit under normal spacing conditions. The exact justification algorithm is UA-dependent; however, CSS provides some general guidelines which should be followed when any justification method other than 'auto' is specified.

このページの上部へ