text-align、 text-justify、 text-align-last : 左右の位置 - CSSプロパティ - Web開発

このページでは、下表の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-lastはtext-alignの「最終行のみ」バージョン。

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

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

（表） `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.

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

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.

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

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.

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

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

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.

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

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

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.

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

日本語の場合、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.

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

日本語の場合、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.

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

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

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

（表） `text-align-last`の設定値
設定値	デフォルト
`justify`
`auto`	○
`left`
`center`
`right`
`start`
`end`
`match-parent`

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以外は、あまり意味があると思えないが、実行結果を示しておく。

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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-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.

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

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.

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

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.

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

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.

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

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

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.

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

記述	Visual Studio Code
`ta`	`text-align: left;`
`tac`	`text-align: center;`
`tar`	`text-align: right;`
`taj`	`text-align: justify;`
`tal`	`text-align-last: left;`
`tj`	`text-justify: auto;`
`tji`	`text-justify: inter-word;`

vertical-align : 上下の位置

`text-align`、 `text-justify`、 `text-align-last` : 左右の位置 CSSプロパティ

概要

`text-align`

left

center

right

justify

justify-all

start

end

`text-align-last`

`justify`

`auto`

`left`

`center`

`right`

`start`

`end`

`match-parent`

`text-justify`

`auto`

`none`

`inter-word`

`inter-character`

Emmet : `ta`

リンク

概要

text-align

left

center

right

justify

justify-all

start

end

text-align-last

justify

auto

left

center

right

start

end

match-parent

text-justify

auto

none

inter-word

inter-character

Emmet : ta

リンク

`text-align`

`text-align-last`

`justify`

`auto`

`left`

`center`

`right`

`start`

`end`

`match-parent`

`text-justify`

`auto`

`none`

`inter-word`

`inter-character`

Emmet : `ta`