CSS3 – text-align

概要

ブロックコンテナ内の行のそろえ方を指定する。

大きく分けると、以下の4つ。

  1. 絶対的な揃え位置を指定
  2. 文章を書く方向を基準に揃え位置を指定
  3. ジャスティフィケーション(両端均等割付)
  4. 親要素の指定の継承

書式

text-align: 値指定;

デフォルトの値はstart。

left/center/right
ブロックコンテナ内の各行を左/中央/右にそろえる。
start/end
テキストを書く方向の始端/終端にそろえる。文を左から右へ書く場合はleft/right、右から左へ書く場合はright/leftと等価。
justify/justify-all
両端に均等割り付けする。日本語の場合は作用しない。justify-allは最後の行も強制的に均等割り付けとなっているが、ほとんどのブラウザで実装されていない。
match-parent
親要素の値を継承するとされているが、動作未確認。

動作確認

left/center/right

ブロックコンテナーの各行が、左/中央/右に揃えられている。1行がブラウザの幅を超える場合、最後の行が左/中央/右に揃えられる。

text-align: left;は左寄せ

text-align: center;はセンタリング

text-align: right;は右寄せ

text-alignのデフォルトはleft

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

start/end

左から右に書く場合

左から右に書かれる場合、end指定がrightと同じ効果になっている。

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

右から左に各場合

右から左に書く場合には、startはright、endはleftと等価。

右から左に書いてstart指定

右から左に書いてend指定

justify

ジャスティフィケーション(両端均等割付)は、ワードとスペースで構成された文章を、行ごとに両端に均等割付する。

以下の1つ目の分はデフォルト値(start)、2つ目の分はjustfyを指定している。ブラウザーの幅を変えるとジャスティフィケーションの様子がわかる。3つ目で日本語に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.

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

ブラウザーの幅を変化させてもジャスティフィケーションの効果は観られず、無指定の場合と同じ。

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.

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です