このページで解説するコードの実行結果。

左右中央揃え : text-align: center;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

右揃え : text-align: right;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

最終行も均等割り当て : text-align-last: justify;

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

なお、見た目のため、全ての<div>要素には下のCSSを設定している。

CSS : デフォルトのCSS
p {  
    border:         solid blue;   /*  境界線  */
    margin:         8px;          /*  外側の余白  */
    display:        inline-block; /*  横並び  */
    vertical-align: top;          /*  上揃え  */
    max-width:      15em;         /*  最大幅  */
}

概要

このページでは、下表のCSSプロパティの解説をする。

CSSプロパティ機能
text-align横方向の配置を設定
text-align-last(最終行の)横方向の配置を設定
text-justify均等配置の詳細設定

text-align横方向の整列を設定する。縦方向に整列するのはvertical-align

text-align
横方向に整列
left
center
中央
right
vertical-align
縦方向に整列
top
middle
中央
bottom

text-align-lasttext-alignの「最終行のみ」バージョン。

text-justifyは「text-align: justify;」(左右均等割り当て)の場合のみ有効で、詳細な設定をする。

なお、これらのCSSプロパティは、ブラウザによって出力結果が異なる(サポートされていない設定が多い)ので、使用する前に確認が必要。

text-align

(表) text-alignの設定値
設定値意味デフォルト
left左寄せ
center中央揃え
right右寄せ
justify均等割り当て
justify-all均等割り当て(最終行も)
start文の開始方向
end文の終了方向
match-parent親要素に合わせる
inherit親要素の値を継承
  • いろいろあるが、日本語ではleft/center/rightを使うことが多い。
  • justifyは英語などのアルファベットで(数行以上の)段落を書く場合などに有効。
  • justify-allは主要なブラウザがサポートしてない。
  • start/end/match-parentは右から左へ書く言語(アラビア語/ヘブライ語など)を書く場合に有効。

以下で例を示すが、適用するHTMLは以下。

HTML : 適用するHTML
<p class="sample" lang="en">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.
</p>
<p class="sample">
    「おれは奇策家ではない」<br>
    竜馬の本音だ。<br>
    「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。
    現実にあわぬことはやらぬ。それだけだ。
    それをなぜ人は奇策家とみるのか、おれにはわからん」<br>
    ~ 竜馬がゆく(司馬遼太郎)
</p>
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

left

CSS : 左寄せ
.sample {  
    text-align: left;            
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

center

CSS : 中央揃え
.sample {  
    text-align: center;            
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

CSS : 右寄せ
.sample {  
    text-align: right;            
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

justify

英語は両端で均等に配置されるが、日本語に効果は無い。

CSS : 均等割り当て
.sample {  
    text-align: justify;            
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

justify-all

※ 主要なブラウザが対応していないので、使わない方がよいだろう。

CSS : 均等割り当て(最終行も)
.sample {  
    text-align: justify-all;            
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

しかし、たぶん期待している結果は、以下のCSSで出る。(日本語に場合、変になるけど)

CSS : 均等割り当て(最終行も):改良版
.sample {  
    text-align:         justify;            
    text-align-last:    justify;            
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

start

日本語の場合、leftの指定と同じになる。

CSS : 文の開始方向
.sample {  
    text-align: start;            
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

しかし、direction: rtl;(右から左に書く言語である、と宣言)とした場合、文の開始方向が右になるので、right指定と同じになる。

CSS : 右から左に書く言語とした場合
.sample {  
    text-align: start;    
    direction:  rtl;        
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

text-align: left;の場合、direction: rtl;と指定しても左のまま。(ただし、「~」やカッコの場所が変わっていたりする)

CSS : leftの場合は、変化なし
.sample {  
    text-align: left;    
    direction:  rtl;        
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

end

日本語の場合、rightの指定と同じになる。

CSS : 文の終了方向
.sample {  
    text-align: end;            
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

startと同様に、direction: rtl;と指定すると逆になる。

CSS : 右から左に書く言語とした場合
.sample {  
    text-align: end;    
    direction:  rtl;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

text-align-last

最終行(および、改行<br>を入れた後)の横方向の配置を設定。

日本語にも効果のある、わりと意味がわからないプロパティ。

(表) text-align-lastの設定値
設定値デフォルト
justify
auto
left
center
right
start
end
match-parent

justify

CSS : justify
.sample {  
    text-align-last:    justify;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

これだと、英語の場合、「最終行以外の行」は均等配置されてない。よって、ふつうはtext-align: justify;と併用する。

CSS : justify
.sample {  
    text-align:         justify;
    text-align-last:    justify;
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

なお、justify以外は、あまり意味があると思えないが、実行結果を示しておく。

auto

CSS : justify
.sample {  
    text-align-last:    auto;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

left

CSS : left
.sample {  
    text-align-last:    left;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

center

CSS : center
.sample {  
    text-align-last:    center;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

right

CSS : right
.sample {  
    text-align-last:    right;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

start

CSS : start
.sample {  
    text-align-last:    start;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

end

CSS : end
.sample {  
    text-align-last:    end;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

match-parent

CSS : match-parent
.sample {  
    text-align-last:    match-parent;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

text-justify

text-align: justify;」(左右均等割り当て)の場合のみ有効。

(表) text-justifyの設定値
設定値英語など日本語などデフォルト
auto×
none××
inter-word×
inter-character

まず、「text-align: justify;」だけを適用した場合。

CSS : 均等割り当て
.sample {  
    text-align: justify;            
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

auto

CSS : auto
.sample {  
    text-align:     justify;
    text-justify:   auto;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

none

text-align: justify;が無効になる。

CSS : none
.sample {  
    text-align:     justify;
    text-justify:   none;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

inter-word

CSS : inter-word
.sample {  
    text-align:     justify;
    text-justify:   inter-word;              
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

inter-character

※ 仕様上、日本語でも均等割り当てされるはずであるが、ほとんどのブラウザは対応していない。

CSS : inter-character
.sample {  
    text-align:     justify;
    text-justify:   inter-character;  
}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。 現実にあわぬことはやらぬ。それだけだ。 それをなぜ人は奇策家とみるのか、おれにはわからん」
~ 竜馬がゆく(司馬遼太郎)

Emmet : ta

記述Visual Studio Code
tatext-align: left;
tactext-align: center;
tartext-align: right;
tajtext-align: justify;
taltext-align-last: left;
tjtext-justify: auto;
tjitext-justify: inter-word;