CSS text-align プロパティ

スタイルシート属性text-alignは、ブロック要素に含まれるインライン要素の揃え方を指定することができる。

書式

text-align: align

属性

text-align プロパティには次に示す属性を指定することができる。

align

テキストの並びの揃え方を指定します。

align属性
値	意味
left	左端揃え（規定値）
center	中央揃え
right	右端揃え
justify	両端揃え
inherit	継承

left

text-align プロパティに left を指定すると、テキストが左に寄せられて、行頭が揃えられる。日本語の横書きや英語では、テキストは左寄せにするのが一般的である。一般的な体裁であるため、初期値となっている。

<p style="text-align: left">
  In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with
  the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it
  to site down on or to eat: it was a hobbit-hole, and that means comfort.
</p>

In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it to site down on or to eat: it was a hobbit-hole, and that means comfort.

スタイルシート属性text-alignの属性値としてjustifyを指定した場合、スタイルシート属性text-justifyでさらにテキストの揃え方を細かく指定することができます。

right

<p style="text-align:right">右寄せ</p>

右寄せ

center

text-align プロパティに center を指定すると、テキストが中央に揃えられる。中央揃えは英語の詩やレストランのメニューによく使われる体裁である。

<p style="text-align:center">
  Hey diddle, diddle!<br>
  The cat and the fiddle,<br>
  The cow jumped over the moon;<br>
  The little dog laughed<br>
  To see such sport,<br>
  And the dish ran away with the spoon.
</p>

Hey diddle, diddle!
The cat and the fiddle,
The cow jumped over the moon;
The little dog laughed
To see such sport,
And the dish ran away with the spoon.

justify

text-align プロパティに justify を指定すると、テキストの両端が揃えられる。これは英文でよく使われる体裁で、行頭と行末の両端を揃えるために単語の間隔が調整される。

テキストの揃え方は、text-justify プロパティで細かく指定できる。

<p style="text-align: justify; width: 300px">
  In a hole in the ground there lived a hobbit. Not a nasty, dirty, wet hole, filled with
  the ends of worms and an oozy smell, not yet a dry, bare, sandy hole with nothing in it
  to site down on or to eat: it was a hobbit-hole, and that means comfort.
</p>

初期値

text-align プロパティの初期値は、direction プロパティの値によって異なる。

text-alignの初期値
directionの値	text-alignの初期値
ltr	left
rtl	right

使用例

次にスタイルシート属性 text-alignを使用したHTMLの例を示します。

span要素はインライン要素なので、text-alignスタイルシートプロパティの影響が及ぶ。

<div style="text-align: center">
  <span>中央揃え</span>
</div>

中央揃え

img要素はインライン要素なので、text-alignスタイルシートプロパティの影響が及ぶ。

<div style="text-align: center">
  <img src="/html/img/button.png">
</div>

text-align が効かない要素

CSS の text-align プロパティは、ブロック要素には効かない。

div はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。

<div style="text-align: center">
  <div style="border: 1px solid; width: 200px">div</div>
</div>

div

pre はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。

<div style="text-align: center">
  <pre style="border: 1px solid; width: 200px"">pre</pre>
</div>

pre

address はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。

<div style="text-align: center">
  <address style="border: 1px solid; width: 200px"">address</address>
</div>

address

ul はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。

<div style="text-align: center">
  <ul style="border: 1px solid; width: 200px">
    <li>list</li>
  </ul>
</div>

list

JavaScript

document.getElementById("id").style.textAlign = "center"

text-justify

スタイルシート属性text-justifyは、単語間や文字間のスペースの調整の仕方を指定します。通常、スタイルシート属性 text-align: justify; と組み合わせて使用します。

書式

text-justify: type

属性値

type

単語間や文字間のスペースの調整の仕方を指定する。

type属性
値	意味
auto	自動（規定値）
newspaper	英文
inter-word	単語間のみによる調整
distribute-all-lines	最後の行も調整
inter-ideograph	単語間と文字間
inter-cluster	アジア言語向き
distribute	タイ語向き
kashida	アラビア語向き

対応状況

現在のところ、Webブラウザが対応しているのはautoとinter-word、noneだけである。これらはすべて表示上の違いはない。

例

次にスタイルシート属性 text-justifyを使用したHTMLの例を示します。

<p style="width: 300px; text-align: justify; text-justify: auto;">
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the pursuit of Happiness.
</p>

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

<p style="width: 300px; text-align: justify; text-justify: inter-word;">
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the pursuit of Happiness.
</p>

<p style="width: 300px; text-align: justify; text-justify: none;">
We hold these truths to be self-evident,
that all men are created equal,
that they are endowed by their Creator with certain unalienable Rights,
that among these are Life, Liberty and the pursuit of Happiness.
</p>

text-indent

スタイルシート属性text-indentは、テキストのインデント（字下げ）を指定します。

ブロック要素、表のセルおよびインライン要素に対して指定可能。

書式

text-indent: length

text-indent: percentage

属性値

length

テキストのインデント（字下げ）幅を絶対値で指定する。以下に示す単位を利用できる。

単位
単位	意味	説明
em		フォントサイズ
rem	root em	ドキュメントのルート要素のフォントサイズ
cm	centimeters	1cm
mm	millimeters	1mm
Q	級 (quarter-millimeters)	0.25mm
in	inches	1 inch
pc	picas	1/6 inch
pt	points	1/72 inch
px	pixels	1/96 inch
%	percent	パーセント
vw	viewport width	ビューポートの幅の1/100
vmin	minimum viewport	ビューポートの幅または高さで小さい方の1/100
vmax	maximum viewport	ビューポートの幅または高さで大きい方の1/100

<p style="text-indent: 2rem">
  Dorothy lived in the midst of the great Kansas prairies, with Uncle
  Henry, who was a farmer, and Aunt Em, who was the farmer's wife.
</p>

Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife.

percentage

親要素の幅に対する相対値でテキストのインデント（字下げ）幅を指定する。

<p style="text-indent: 10%">10%</p>
<p style="text-indent: 20%">20%</p>

10%

20%

参考文献

World Wide Web Consortium (2022) CSS Text Module Level 3