概要
ブロックコンテナ内の行のそろえ方を指定する。
大きく分けると、以下の4つ。
- 絶対的な揃え位置を指定
- 文章を書く方向を基準に揃え位置を指定
- ジャスティフィケーション（両端均等割付）
- 親要素の指定の継承
書式
text-align: 値指定;
値
デフォルトの値はstart。
- left/center/right
- ブロックコンテナ内の各行を左／中央／右にそろえる。
- start/end
- テキストを書く方向の始端／終端にそろえる。文を左から右へ書く場合はleft/right、右から左へ書く場合はright/leftと等価。
- justify/justify-all
- 両端に均等割り付けする。日本語の場合は作用しない。justify-allは最後の行も強制的に均等割り付けとなっているが、ほとんどのブラウザで実装されていない。
- match-parent
- 親要素の値を継承するとされているが、動作未確認。
動作確認
left/center/right
ブロックコンテナーの各行が、左／中央／右に揃えられている。1行がブラウザの幅を超える場合、最後の行が左／中央／右に揃えられる。
|
1 2 3 4 5 6 7 8 9 |
<p style="text-align: left;">text-align: left;は左寄せ</p> <p style="text-align: center;">text-align: center;はセンタリング</p> <p style="text-align: right;">text-align: right;は右寄せ</p> <p style="text-align: center;"> ゴーシュは町の活動写真館でセロを弾く係りでした。 けれどもあんまり上手でないという評判でした。 上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、 いつでも楽長にいじめられるのでした。 </p> |
text-align: left;は左寄せ
text-align: center;はセンタリング
text-align: right;は右寄せ
text-alignのデフォルトはleft
ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。
start/end
左から右に書く場合
左から右に書かれる場合、end指定がrightと同じ効果になっている。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<p style="text-align: end;"> ゴーシュは町の活動写真館でセロを弾く係りでした。 けれどもあんまり上手でないという評判でした。 上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、 いつでも楽長にいじめられるのでした。 </p> <p style="text-align: end;"> ゴーシュは町の活動写真館でセロを弾く係りでした。 けれどもあんまり上手でないという評判でした。 上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、 いつでも楽長にいじめられるのでした。 </p> |
ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。
ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。
右から左に各場合
右から左に書く場合には、startはright、endはleftと等価。
|
1 2 3 4 5 6 |
<p style="direction: rtl; unicode-bidi: bidi-override; text-align: start;"> 右から左に書いてstart指定 </p> <p style="direction: rtl; unicode-bidi: bidi-override; text-align: end;"> 右から左に書いてstart指定 </p> |
右から左に書いてstart指定
右から左に書いてend指定
justify
ジャスティフィケーション（両端均等割付）は、ワードとスペースで構成された文章を、行ごとに両端に均等割付する。
以下の1つ目の分はデフォルト値(start)、2つ目の分はjustfyを指定している。ブラウザーの幅を変えるとジャスティフィケーションの様子がわかる。3つ目で日本語にjustifyを指定しているが、効果はない。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<p> ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot. </p> <p style="text-align: justify;"> ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot. </p> <p style="text-align: justify"> ゴーシュは 町の活動写真館で セロを弾く係りでした。 けれども あんまり上手でない という評判でした。 上手でないどころではなく 実は仲間の楽手のなかでは いちばん下手でしたから、 いつでも 楽長にいじめられるのでした。 </p> |
ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot.
ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot.
ゴーシュは 町の活動写真館で セロを弾く係りでした。 けれども あんまり上手でない という評判でした。 上手でないどころではなく 実は仲間の楽手のなかでは いちばん下手でしたから、 いつでも 楽長にいじめられるのでした。
justify-all
ブラウザーの幅を変化させてもジャスティフィケーションの効果は観られず、無指定の場合と同じ。
|
1 2 3 4 5 |
<p style="text-align: justify-all;"> ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot. </p> |
ONCE upon a time, many years ago—when our grandfathers were little children—there was a doctor; and his name was Dolittle—John Dolittle, M.D. “M.D.” means that he was a proper doctor and knew a whole lot.