1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: text-align
slug: Web/CSS/text-align
tags:
- CSS
- CSS プロパティ
- CSS テキスト
- Reference
- recipe:css-property
browser-compat: css.properties.text-align
translation_of: Web/CSS/text-align
---
{{CSSRef}}
**`text-align`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ブロック要素または表セルボックスの水平方向の配置を設定します。つまり、 {{cssxref("vertical-align")}} のように、ただし水平方向に動作します。
{{EmbedInteractiveExample("pages/css/text-align.html")}}
## 構文
```css
/* キーワード値 */
text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;
/* 表の列における文字ベースの配置 */
text-align: ".";
text-align: "." center;
/* ブロック配置の値 (標準外の構文) */
text-align: -moz-center;
text-align: -webkit-center;
/* グローバル値 */
text-align: inherit;
text-align: initial;
text-align: revert;
text-align: unset;
```
`text-align` プロパティは、以下の方法のうちの一つで指定されます。
- キーワード値 `start`, `end`, `left`, `right`, `center`, `justify`, `justify-all`, `match-parent` のいずれかを使用。
- `<string>` 値のみを使用、この場合は他の値の既定値が `right` になります。
- キーワード値または [`<string>`](#string) 値の使用。
### 値
- `start`
- : 書字方向が左書きであれば `left`、右書きであれば `right` と同じです。
- `end`
- : 書字方向が左書きであれば `right`、右書きであれば `left` と同じです。
- `left`
- : インラインコンテンツは行ボックスの左辺に寄せられます。
- `right`
- : インラインコンテンツは行ボックスの右辺に寄せられます。
- `center`
- : インラインコンテンツは行ボックス内で中央寄せされます。
- `justify`
- : インラインコンテンツは両端揃えされます。テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように間隔が空けられます。
- `justify-all` {{experimental_inline}}
- : `justify` と同じですが、最終行も強制的に両端揃えされます。
- `match-parent`
- : `inherit` に似ていますが、 `start` と `end` 値が親要素の {{cssxref("direction")}} に従って計算され、適切な `left` か `right` 値に置き換えられます。
- {{cssxref("<string>")}} {{experimental_inline}}
- : 表のセルに適用された場合、セルのコンテンツが揃えられる位置揃え文字を指定します。
## アクセシビリティの考慮
両端揃えによって単語間の空白が不規則になると、失読症のような認知問題を抱えた人にとって問題になることがあります。
- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
- [Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
## 公式定義
{{CSSInfo}}
## 形式文法
{{csssyntax}}
## Examples
<h3 id="Start_alignment">先頭へ配置</h3>
#### HTML
```html
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```
#### CSS
```css
.example {
text-align: start;
border: solid;
}
```
#### 結果
{{EmbedLiveSample("Start_alignment","100%","100%")}}
<h3 id="Centered_text">中央揃え</h3>
#### HTML
```html
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```
#### CSS
```css
.example {
text-align: center;
border: solid;
}
```
#### 結果
{{EmbedLiveSample("Centered_text","100%","100%")}}
<h3 id="Justify">両端揃え</h3>
#### HTML
```html
<p class="example">
Integer elementum massa at nulla placerat varius.
Suspendisse in libero risus, in interdum massa.
Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>
```
#### CSS
```css
.example {
text-align: justify;
border: solid;
}
```
#### 結果
{{EmbedLiveSample("Justify","100%","100%")}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}}
|
