以下のセクションで定義されているプロパティは、文字、空白、単語、および段落の視覚的な表示に影響を与えます。
このプロパティは、ブロックコンテナの最初の行のテキストのインデントを指定します。より正確には、ブロックの最初のラインボックスに流れる最初のボックスのインデントを指定します。このボックスは、ラインボックスの左端（右から左のレイアウトの場合は右端）に対してインデントされます。ユーザーエージェントはこのインデントを空白として描画する必要があります。
'text-indent' は、要素の最初の整形行である場合にのみ行に影響を与えます。例えば、匿名ブロックボックスの最初の行は、親要素の最初の子である場合にのみ影響を受けます。
値の意味は以下の通りです:
- <length>
- インデントは固定長です。
- <percentage>
- インデントは包含ブロックの幅のパーセンテージです。
'text-indent' の値は負になる可能性がありますが、実装依存の制限がある場合があります。
'text-indent'
の値が負またはブロックの幅を超える場合、上記で説明された最初のボックスがブロックをオーバーフローする可能性があります。
'overflow'
の値は、そのようなテキストがブロックをオーバーフローする場合に表示されるかどうかに影響します。
例:
以下の例では、'3em' のテキストインデントが発生します。
p { text-indent: 3em }
注: 'text-indent' プロパティは継承されるため、ブロック要素に指定された場合、その影響は子孫のインラインブロック要素にも及びます。
このため、'text-indent: 0' を 'display:inline-block' と指定された要素に指定することが賢明です。
| 名前:
| text-align
|
| 値:
| left | right | center | justify | inherit
|
| 初期値:
| 名前のない値で、'direction' が 'ltr' の場合は 'left' として、'direction' が 'rtl' の場合は 'right' として動作します。
|
| 適用対象:
| ブロックコンテナ
|
| 継承:
| はい
|
| パーセンテージ:
| N/A
|
| メディア:
| 視覚
|
| 計算値:
| 初期値または指定された値
|
このプロパティは、ブロックコンテナのインラインレベルコンテンツの整列方法を記述します。値の意味は以下の通りです:
- left, right, center, justify
- それぞれ、インライン整形のセクションで説明されているように、左揃え、右揃え、中央揃え、および両端揃えのテキスト。
テキストのブロックは、ラインボックスのスタックです。'left'、'right'、および 'center'
の場合、このプロパティは各ラインボックス内のインラインレベルボックスがラインボックスの左端と右端に対してどのように整列するかを指定します。整列はビューポートに対してではありません。
'justify'
の場合、このプロパティはインラインレベルボックスが可能ならばラインボックスの両端に揃うように、インラインボックスの内容を拡張または縮小することで整列することを指定します。それ以外の場合は、初期値のように整列します。（'letter-spacing' および 'word-spacing' も参照してください。）
要素の 'white-space' の計算値が 'pre' または 'pre-wrap' の場合、その要素のテキストコンテンツのグリフや空白は、両端揃えの目的で変更されません。
注: CSS は将来的に 'white-space: pre-wrap' を使用したテキストの両端揃え方法を追加する可能性があります。
例:
この例では、'text-align' が継承されるため、クラス名が 'important' の DIV
内のすべてのブロックレベル要素のインラインコンテンツが中央に揃えられます。
div.important { text-align: center }
注.
実際の両端揃えアルゴリズムは、ユーザーエージェントおよびテキストの言語/スクリプトに依存します。
適合するユーザーエージェントは、
'justify' の値を、要素のデフォルトの書字方向が左から右の場合は 'left'、右から左の場合は 'right' として解釈する場合があります。
16.3 装飾
| 名前:
| text-decoration
|
| 値:
| none | [ underline || overline || line-through || blink ] | inherit
|
| 初期値:
| none
|
| 適用対象:
| すべての要素
|
| 継承:
| いいえ（本文を参照）
|
| パーセンテージ:
| N/A
|
| メディア:
| 視覚
|
| 計算値:
| 指定された通り
|
このプロパティは、要素のテキストに追加される装飾を要素の色を使用して記述します。
インライン要素に指定されるか、またはインライン要素に伝播されると、
その要素によって生成されたすべてのボックスに影響し、さらに
インラインを分割するインフローブロックレベルボックスに伝播されます（セクション 9.2.1.1を参照）。
ただし、CSS 2.2では、この装飾がブロックレベルのテーブルに伝播されるかどうかは未定義です。
インライン整形コンテキストを確立するブロックコンテナの場合、
装飾はブロックコンテナのすべてのインフローインラインレベル子をラップする匿名のインライン要素に伝播されます。
他のすべての要素については、装飾はインフロー子に伝播されます。テキスト装飾は、フロートおよび絶対位置の子孫や、
インラインブロックやインラインテーブルのようなアトミックなインラインレベルの子孫には伝播されないことに注意してください。
下線、上線、および打ち消し線はテキスト（空白、文字間隔、および単語間隔を含む）にのみ適用されます。
マージン、境界線、パディングはスキップされます。
ユーザーエージェントは、テキストでないコンテンツにこれらのテキスト装飾を描画してはなりません。
例えば、画像やインラインブロックには下線を付けてはなりません。
注記: 要素 E が 'visibility: hidden' と 'text-decoration: underline' の両方を持つ場合、
下線は見えません（ただし、E の親の装飾は見える）。しかし、CSS 2.2では、
E の子で下線が見えるか見えないかについては指定されていません:
<span style="visibility: hidden; text-decoration: underline">
<span style="visibility: visible">
下線付きかどうか？
</span>
</span>
これは、CSS のレベル 3 で指定される予定です。
子孫要素での 'text-decoration' プロパティは、祖先の装飾に影響を与えることはできません。テキスト装飾線の位置と太さを決定する際、
ユーザーエージェントは子孫のフォントサイズおよび支配的ベースラインを考慮する場合がありますが、
各行で同じベースラインと太さを使用する必要があります。
子孫を相対的に配置すると、影響を受けるすべてのテキスト装飾が子孫のテキストとともに移動します。
これは、その行での装飾の初期位置の計算には影響しません。
値の意味は以下の通りです:
- none
- テキスト装飾を生成しません。
- underline
- テキストの各行に下線が引かれます。
- overline
- テキストの各行の上に線が引かれます。
- line-through
- テキストの各行の中央に線が引かれます。
- blink
- テキストが点滅します（可視と不可視を交互に繰り返します）。
適合するユーザーエージェントは、単にテキストを点滅させない場合があります。
テキストを点滅させないことは、
WAI-UAAG のチェックポイント
3.3を満たす1つの技術です。
テキスト装飾に必要な色は、'text-decoration' が設定されている要素の 'color' プロパティ値から派生しなければなりません。
子孫要素が異なる'color'値を持っていても、装飾の色は同一である必要があります。
一部のユーザーエージェントは、上記で説明したように一定の太さと線の位置を保持するのではなく、
装飾を子孫要素に伝播させることで 'text-decoration' を実装しています。
これは、CSS2 のより緩い表現により許容されていた可能性があります。
SVG1、CSS1のみ、およびCSS2のみのユーザーエージェントは、古いモデルを実装していても、CSS 2.2 のこの部分への適合性を主張することができます。
（この仕様が発表された後に開発されたユーザーエージェントには適用されません。）
例:
HTML の次の例では、ハイパーリンクとして機能するすべての A 要素（訪問済みであるかどうかに関係なく）のテキストコンテンツに下線が引かれます:
a:visited,a:link { text-decoration: underline }
例:
次のスタイルシートと文書断片では:
blockquote { text-decoration: underline; color: blue; }
em { display: block; }
cite { color: fuchsia; }
<blockquote>
<p>
<span>
助けて、助けて！
<em> 私は帽子の下にいます！ </em>
<cite> —GwieF </cite>
</span>
</p>
</blockquote>
...blockquote 要素の下線は span 要素を囲む匿名のインライン要素に伝播し、
テキスト "助けて、助けて！" が青色になり、匿名のインライン要素の下に青色の下線が表示されます。この色は blockquote 要素から取得されます。
<em>テキスト</em>内のテキストも下線が引かれます。
これは、下線が伝播されるインフローブロック内にあるためです。最後の行のテキストはフューシャ色ですが、
その下線は匿名のインライン要素からの青色の下線のままです。
この図は、上記の例に関与するボックスを示しています。丸い水色の線は段落要素のインラインコンテンツをラップする匿名のインライン要素を表し、
丸い青色の線は span 要素を表し、オレンジ色の線はブロックを表しています。
このプロパティは、テキスト文字間の間隔の動作を指定します。値の意味は以下の通りです:
- normal
- 現在のフォントの通常の間隔です。この値は、ユーザーエージェントがテキストを両端揃えするために文字間のスペースを変更できることを許可します。
- <length>
- この値は、文字間のデフォルトスペースに追加して文字間のスペースを示します。値は負である場合がありますが、実装依存の制限がある場合があります。
ユーザーエージェントは、テキストを両端揃えするために文字間のスペースをさらに増減してはなりません。
文字間隔アルゴリズムはユーザーエージェントに依存します。
例:
この例では、BLOCKQUOTE 要素内の文字間のスペースが '0.1em' 増加します。
blockquote { letter-spacing: 0.1em }
次の例では、ユーザーエージェントは文字間のスペースを変更することは許可されていません:
blockquote { letter-spacing: 0cm } /* '0' と同じ */
2つの文字間の結果として得られるスペースがデフォルトのスペースと異なる場合、ユーザーエージェントは
リガチャを使用すべきではありません。
このプロパティは、単語間の間隔の動作を指定します。値の意味は以下の通りです:
- normal
- 現在のフォントおよび/またはUAによって定義された通常の単語間スペース。
- <length>
- この値は、単語間のデフォルトスペースに追加して単語間のスペースを示します。値は負である場合がありますが、実装依存の制限がある場合があります。
単語間隔アルゴリズムはユーザーエージェントに依存します。また、単語間隔は両端揃え（'text-align' プロパティを参照）によっても影響を受けます。
単語間隔は、空白処理ルールが適用された後にテキストに残る各スペース（U+0020）および改行禁止スペース（U+00A0）に影響します。
プロパティが他の単語区切り文字に与える影響は未定義です。ただし、一般的な句読点、幅がゼロの文字（例えばゼロ幅スペース U+200B）および固定幅スペース（例えば U+3000 および U+2000 から
U+200A）は影響を受けません。
例:
この例では、H1 要素内の各単語間の単語間隔が '1em' 増加します。
h1 { word-spacing: 1em }
| 名前:
| text-transform
|
| 値:
| capitalize | uppercase | lowercase | none | inherit
|
| 初期値:
| none
|
| 適用対象:
| すべての要素
|
| 継承:
| はい
|
| パーセンテージ:
| N/A
|
| メディア:
| 視覚
|
| 計算値:
| 指定された通り
|
このプロパティは、要素のテキストに対する大文字化効果を制御します。値の意味は以下の通りです:
- capitalize
- 各単語の最初の文字を大文字にします。他の文字には影響しません。
- uppercase
- 各単語のすべての文字を大文字にします。
- lowercase
- 各単語のすべての文字を小文字にします。
- none
- 大文字化効果はありません。
実際の変換は、各ケースで書記言語に依存します。要素の言語を見つける方法については、BCP 47 ([BCP47]) を参照してください。
"二分法的スクリプト" に属する文字のみが影響を受けます [UNICODE]。
例:
この例では、H1 要素内のすべてのテキストが大文字に変換されます。
h1 { text-transform: uppercase }
| 名前:
| white-space
|
| 値:
| normal | pre | nowrap | pre-wrap | pre-line | inherit
|
| 初期値:
| normal
|
| 適用対象:
| すべての要素
|
| 継承:
| はい
|
| パーセンテージ:
| N/A
|
| メディア:
| 視覚
|
| 計算値:
| 指定された通り
|
このプロパティは、要素内の空白がどのように処理されるかを宣言します。値の意味は以下の通りです:
- normal
- この値は、ユーザーエージェントに空白の連続を折りたたみ、ラインボックスを埋めるために必要に応じて行を折り返すよう指示します。
- pre
- この値は、ユーザーエージェントが空白の連続を折りたたむのを防ぎます。行は、保存された改行文字でのみ折り返されます。
- nowrap
- この値は、'normal' と同様に空白を折りたたみますが、テキスト内の行の折り返しを抑制します。
- pre-wrap
- この値は、ユーザーエージェントが空白の連続を折りたたむのを防ぎます。行は、保存された改行文字およびラインボックスを埋めるために必要に応じて折り返されます。
- pre-line
- この値は、ユーザーエージェントに空白の連続を折りたたむよう指示します。行は、保存された改行文字およびラインボックスを埋めるために必要に応じて折り返されます。
ソース内の改行は、キャリッジリターン (U+000D)、ラインフィード (U+000A)、またはその両方 (U+000D U+000A)、
またはドキュメントセグメントの開始と終了を識別する他のメカニズム（例: SGML RECORD-START および RECORD-END トークン）で表される場合があります。
CSS の 'white-space' 処理モデルは、すべての改行がラインフィードに正規化されていると仮定します。
他の改行表現を認識するユーザーエージェントは、この正規化が行われたかのように空白処理ルールを適用する必要があります。
ドキュメント言語に改行ルールが指定されていない場合、ドキュメントテキスト内の各キャリッジリターン (U+000D) および CRLF シーケンス (U+000D U+000A) は、
単一のラインフィード文字として扱われます。このデフォルトの正規化ルールは、生成されたコンテンツにも適用されます。
ユーザーエージェントは、ラインフィード (U+000A) を改行文字として認識する必要があります。
ユーザーエージェントは、UAX14 に従って他の強制改行文字を改行文字として扱う場合があります。
例:
次の例は、PRE および P 要素、および HTML の "nowrap" 属性から期待される空白の動作を示しています。
pre { white-space: pre }
p { white-space: normal }
td[nowrap] { white-space: nowrap }
さらに、非標準 の "wrap" 属性を持つ HTML PRE 要素の効果を次の例で示します:
pre[wrap] { white-space: pre-wrap }
各インライン要素（匿名インライン要素を含む）に対して、以下の手順が実行されます。
この際、双方向フォーマッティング文字は存在しないものとして扱われます：
-
行送り文字（U+000A）を囲むタブ（U+0009）、キャリッジリターン（U+000D）、またはスペース（U+0020）文字は、
『white-space』が『normal』、『nowrap』、または『pre-line』に設定されている場合に削除されます。
-
『white-space』が『pre』または『pre-wrap』に設定されている場合、要素境界によって途切れないスペース（U+0020）の連続は、
非改行スペースとして扱われます。ただし、『pre-wrap』の場合、連続の終端に改行の機会が存在します。
-
『white-space』が『normal』または『nowrap』に設定されている場合、行送り文字は
レンダリング目的で以下のいずれかの文字に変換されます：スペース文字、ゼロ幅スペース文字（U+200B）、または何の文字もない（つまり、レンダリングされない）。
この変換は、コンテンツスクリプトに基づいたユーザーエージェント固有のアルゴリズムに従います。
-
『white-space』が『normal』、『nowrap』、または『pre-line』に設定されている場合、
- すべてのタブ（U+0009）はスペース（U+0020）に変換されます。
- スペース（U+0020）が別のスペース（U+0020）に続く場合（インラインの前のスペースも含む）、
そのスペースも削除されます。この場合、そのスペースも『white-space』が『normal』、『nowrap』または『pre-line』に設定されている必要があります。
その後、ブロックコンテナ内のインライン要素がレイアウトされます。
インライン要素は、双方向再配置を考慮し、『white-space』プロパティで指定されたように折り返されます。
折り返しの際、改行機会は上記の空白折り畳み手順の前のテキストに基づいて決定されます。
各行がレイアウトされる際、
-
行の先頭にあるスペース（U+0020）が『white-space』を『normal』、『nowrap』、または『pre-line』に設定されている場合、それは削除されます。
-
すべてのタブ（U+0009）は水平シフトとしてレンダリングされ、
次のグリフの開始端が次のタブストップに揃うようにします。タブストップは、ブロックのフォントでレンダリングされたスペース（U+0020）の幅の8倍の倍数の位置に発生します。
-
行末にあるスペース（U+0020）が『white-space』を『normal』、『nowrap』、または『pre-line』に設定されている場合、それも削除されます。
-
行末のスペース（U+0020）またはタブ（U+0009）が『white-space』を『pre-wrap』に設定されている場合、ユーザーエージェントはそれらを視覚的に折り畳むことがあります。
フロートおよび絶対位置の要素は改行機会を生じさせません。
注記。
CSS 2.2では、改行機会がどこに発生するかを完全には定義していません。
以下のマークアップ断片を前提として、特に空白（識別のために異なる背景と枠線を使用）に注目してください：
<ltr>A <rtl> B </rtl> C</ltr>
ここで、<ltr> 要素は左から右の埋め込みを表し、
<rtl> 要素は右から左の埋め込みを表します。
また、『white-space』プロパティが『normal』に設定されていると仮定すると、
上記の処理モデルは以下の結果をもたらします：
- B の前のスペース（ ）は A の後のスペース（ ）と折り畳まれます。
- C の前のスペース（ ）は B の後のスペース（ ）と折り畳まれます。
これにより、左から右の埋め込みレベルの A の後に1つのスペース、右から左の埋め込みレベルの B の後に1つのスペースが残されます。
これが Unicode 双方向アルゴリズムに従ってレンダリングされ、最終的な結果は以下のようになります：
A BC
A と B の間に2つのスペースがあり、B と C の間にはスペースがありません。
これは、明示的な埋め込みレベルではなく、文字の自然な双方向性を使用することで回避できる場合があります。
また、開始タグおよび終了タグのすぐ内側にスペースを置くのは避けるのが良いです。
これらは空白折り畳みを扱う際に予期しない挙動を引き起こす傾向があります。
U+0009（タブ）、U+000A（ラインフィード）、U+0020（スペース）、および U+202x（双方向フォーマッティング文字）以外の制御文字は、
通常の文字と同じ方法でレンダリングされるべき文字として扱われます。
結合文字は、それが結合することを意図している文字の一部として扱われるべきです。
例えば、:first-letter は、"o<span>̈</span>" のようなコンテンツがある場合、
ベース文字だけでなく、全体のグリフをスタイルします。