text-align
スタイルシート属性text-alignは、テキストの揃え方を指定します。
書式
属性値
alignにはテキストの並びの揃え方を指定します。
| 値 | 意味 |
|---|---|
| left | 左端揃え（規定値） |
| center | 中央揃え |
| right | 右端揃え |
| justify | 両端揃え |
| inherit | 継承 |
スタイルシート属性text-alignの属性値としてjustifyを指定した場合、スタイルシート属性text-justifyでさらにテキストの揃え方を細かく指定することができます。
使用例と表示サンプル
次にスタイルシート属性 text-alignを使用したHTMLの例を示します。
<p style="text-align:center">text-align is center</p>
<p style="text-align:right">text-align is right</p>
<p style="text-align:justify">text-align is justify</p>
This paragraph's stylesheet attribute is "text-align: left".
This paragraph's stylesheet attribute is "text-align: center".
This paragraph's stylesheet attribute is "text-align: right".
This paragraph's stylesheet attribute is "text-align: justify".
text-justify
スタイルシート属性text-justifyは、単語間や文字間のスペースの調整の仕方を指定します。 通常、スタイルシート属性 text-align: justify; と組み合わせて使用します。
書式
次にtypeに指定できる値を示します。
| 値 | 意味 |
|---|---|
| auto | 自動（規定値） |
| newspaper | 英文 |
| inter-word | 単語間のみによる調整 |
| distribute-all-lines | 最後の行も調整 |
| inter-ideograph | 単語間と文字間 |
| inter-cluster | アジア言語向き |
| distribute | タイ語向き |
| kashida | アラビア語向き |
例
次にスタイルシート属性 text-justifyを使用したHTMLの例を示します。
<p style="text-align: justify; text-justify: newspaper">This paragraph's stylesheet attribute is "text-align: justify; text-justify: newspaper".</p>
<p style="text-align: justify; text-justify: inter-word">This paragraph's stylesheet attribute is "text-align: justify; text-justify: inter-word".</p>
<p style="text-align: justify; text-justify: distribute-all-lines">This paragraph's stylesheet attribute is "text-align: justify; text-justify: distribute-all-lines".</p>
<p style="text-align: justify; text-justify: inter-ideograph">This paragraph's stylesheet attribute is "text-align: justify; text-justify: inter-ideograph".</p>
This paragraph's stylesheet attribute is "text-align: justify; text-justify: auto".
This paragraph's stylesheet attribute is "text-align: justify; text-justify: newspaper".
This paragraph's stylesheet attribute is "text-align: justify; text-justify: inter-word".
This paragraph's stylesheet attribute is "text-align: justify; text-justify: distribute-all-lines".
This paragraph's stylesheet attribute is "text-align: justify; text-justify: inter-ideograph".
text-indent
スタイルシート属性text-indentは、テキストのインデント（字下げ）を指定します。
書式
属性値
indentにはテキストのインデント（字下げ）幅を指定します。1emのように数値と単位で指定するか、次の値から指定します。
| 値 | 意味 |
|---|---|
| inherit | 継承 |
使用例
スタイルシート属性 text-indent を使用した HTML の例を次に示します。表示結果はブラウザによって異なることがあります。
<p style="text-indent: 1em">1em</p>
<p style="text-indent: 2em">2em</p>
0em
1em
2em
<p style="text-indent: 20px">20px</p>
<p style="text-indent: 30px">30px</p>
10px
20px
30px
vertical-align
スタイルシート属性vertical-alignは、テキストの縦方向の位置を指定します。
書式
属性値
- align
- テキストの縦方向の位置を次の値の中から指定します。baseline はアルファベット x の下端を基準とした線です。text-bottom は文字 y の下端を基準とした線です。
値 意味 baseline ベースライン middle 中央合わせ sub 下付き文字 super 上付き文字 text-top テキストの上限合わせ text-bottom テキストの下限合わせ top 上端 bottom 下端 inherit 継承
使用例
次にスタイルシート属性 vertical-align を使用したHTMLの例を示します。
<span style="vertical-align: middle">middle</span>
<span style="vertical-align: sub">sub</span>
<span style="vertical-align: super">super</span>
<span style="vertical-align: text-top">text-top</span>
<span style="vertical-align: text-bottom">text-bottom</span>
<span style="vertical-align: top">top</span>
<span style="vertical-align: bottom">bottom</span>