スタイルシート属性text-alignは、ブロック要素に含まれるインライン要素の揃え方を指定することができる。
text-align: align
text-align プロパティには次に示す属性を指定することができる。
値 | 意味 |
---|---|
left | 左端揃え(規定値) |
center | 中央揃え |
right | 右端揃え |
justify | 両端揃え |
inherit | 継承 |
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でさらにテキストの揃え方を細かく指定することができます。
<p style="text-align:right">右寄せ</p>
右寄せ
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.
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>
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 プロパティの初期値は、direction プロパティの値によって異なる。
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>
CSS の text-align プロパティは、ブロック要素には効かない。
div はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。
<div style="text-align: center">
<div style="border: 1px solid; width: 200px">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>
ul はブロック要素なので、text-align プロパティは効かない。ただし、ブロック要素内のテキストやインライン要素には効く。
<div style="text-align: center">
<ul style="border: 1px solid; width: 200px">
<li>list</li>
</ul>
</div>
document.getElementById("id").style.textAlign = "center"
スタイルシート属性text-justifyは、単語間や文字間のスペースの調整の仕方を指定します。 通常、スタイルシート属性 text-align: justify; と組み合わせて使用します。
text-justify: 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>
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: 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>
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.
スタイルシート属性text-indentは、テキストのインデント(字下げ)を指定します。
ブロック要素、表のセルおよびインライン要素に対して指定可能。
text-indent: length
text-indent: percentage
単位 | 意味 | 説明 |
---|---|---|
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.
<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