この文書の情報
Katsu <katsu@ea.mbn.or.jp>最終改訂日：2008年02月28日
文字とその間隔，単語，そして段落など，視覚的な表現に影響を及ぼすプロパティ。
| 値 | <length> | <percentage> | inherit |
|---|---|
| 初期値 | 0 |
| 適用要素 | ブロックレヴェル要素，表のセル要素，inline-block要素 |
| 継承性 | あり |
| パーセント値 | 包含ブロックの横幅に対する割合 |
| メディアグループ | visual |
このプロパティでは，ブロックに含まれるテキストの先頭行にインデント（字下げ）を指定します。厳密には，ブロックの中身にある最初の行ボックスに流し込まれる先頭ボックスの左辺（書字方向が 'rtl' なら右辺）に透明なスペースとして挿入されます。
各値は以下のような意味を持ちます：
<length>挿入するインデントを定数長で指定する。
<percentage>挿入するインデントを包含ブロックの幅に対する割合とする。
なおインデントされた先頭ボックスは，時によりブロックボックスの外側へと溢れることもあります：
この様な場合に溢れたテキストをどう表示するかは，'overflow'プロパティの値に左右されます。
この段落は '+1em' のインデントを指定しています。'text-indent'はブロックの中にあるテキストの1行目のインデントを指定するプロパティです。初期値は '0' で，継承性を持っています。
この段落は '-1em' のインデントを指定しています。負の値も指定可能ですが，実装上は値に特定の制限範囲が生じる事もあります。溢れ出した内容を表示するか否かは'overflow'プロパティの値に左右されます。
この段落は '+30%' のインデントを指定しています。パーセント指定は包含ブロックの横幅に対する割合を指定するのであって，表示域やbody要素の内容幅に対しての割合ではありませんので間違えないでください。
この段落も '+30%' のインデントを指定しています。パーセント指定は包含ブロックの横幅に対する割合です。この段落には同時に width:100% も指定しています。
| 値 | left | right | center | justify | <string> | inherit |
|---|---|
| 初期値 | UAの実装と書字方向に依存 |
| 適用要素 | ブロックレヴェル要素，表のセル要素，inline-block要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，ブロックボックスに含まれるインライン内容の揃え方を指定します。
各値は以下のような意味を持ちます：
left, right, center各行の両端に対して，インライン内容をそれぞれ左揃え，右揃え，中央揃えにする。
これらの値は，各行ボックス――テキストを含むブロックは1行を構成する行ボックスの積み重ねから成る――内部のインラインボックスを，その行ボックスの左端や右端に対してどう揃えるのか指定します； 決して表示域に対して揃える訣ではありません。
【註】：'text-align'プロパティは継承性を持つので，子孫ブロックにわたる行内でインラインボックスを整列させます。しかしながら，子孫ブロック自身における“水平配置”には影響しません； ブロックの水平配置は，'margin-left'，'margin-right'で調整します。
justify両端揃えにする。この値の効果は文字と単語の間隔を調整するプロパティの影響を受ける事もあります。
1行に含まれるインラインボックス幅の合計が "行ボックス幅" より小さくなる場合において，各ボックスの中にある空白や単語を引き延ばすかどうかはUAおよび使用言語/用字系に依ります。原則として両端揃えの効果はブロック内の最終行には及びません。
CSS2の改訂版であるCSS2.1 16.2 Alignmentでは，'justify' の実装方法について，次のように述べています。
実際に用いられる両端揃えのアルゴリズムは，User Agentおよび使用言語/用字系に依存する。
'justify' という値を，当該要素のデフォルト書字方向に従って 'left' か 'right' として扱ってもよい。
（補足：両端揃えの効果は複数行のテキストから成るブロックにおいて，最終の行ボックスをのぞく行頭・行末が揃うようにテキストを満たします――たとえば単語や空白を伸縮する等して，読みやすく・美しく整える。1行に満たない段落でも強制分配してしまう均等割附とは異る。）
CSS2.1適合では，もし 'text-align' の算出値が 'justify' であり，'white-space' の算出値が 'pre' もしくは 'pre-line'（CSS2.1で追加）の場合，'text-align' の実効値は初期値に設定されます； つまり書字方向に従って 'left' もしくは 'right' に扱われるでしょう。
【註】：既存ウェブブラウザの多くでは，欧文用字系を想定した単語間隔を延長させる方法を実装しています。
【註】：現代日本の表記体系では，かなや漢字など以外にラテン文字の単語なども時おり含むので，文字間隔（かなや漢字の字間）と単語間隔（欧文の単語間）を組合せた調整が必要です。しかし大抵はそうして呉れません。（cf. Firefoxが対応）
【註】：次世代仕様のCSS3では'text-justify'などのプロパティが考案されており，世界中の様々な表記体系――たとえばCJKやハングル，南アジア（デーヴァナーガリー，ベンガル，グルムキー，etc），東南アジア（タイ，ラオ，クメール，ビルマ，etc），アラビア系の筆記体，そのほか分ち書きが必要になる用字系（ラテン，ギリシャ，キリル，ヘブライ，etc）――に合せた両端揃えを設定できます。
【註】：Win版のMSIEでは'text-justify'プロパティを先行実装していますが，これはかなり古い草案に基くもので，現今の新しい草案とは差異が生じています。つまりこの実装は，将来のW3C勧告との互換性を保てられません。こういう身勝手な実装は将来，相互運用性に問題を来すでしょう。和文に最適な 'inter-ideograph' の値は最終案まで残る可能性はありますが，推奨できません。
<string>表の同列にあるセル（HTMLではth要素およびtd要素）の文字を揃えるのに，基準となる文字列を指定します。この値がセル要素以外に適用された場合，'direction' の値が 'ltr' であるか 'rtl' であるかに従って，銘々 'left' あるいは 'right' として扱われます。
この値の詳細については，CSS2勧告邦訳 17.5.4 列を通して文字の位置を揃えるを参照してください。
A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the viewport. In the case of 'justify', theUAmay stretch the inline boxes in addition to adjusting their positions. (See also 'letter-spacing' and 'word-spacing'.)
（下記の仕様書からの引用文には text-align: justify; を適用させています。欧文の両端揃えを実装しているブラウザであれば，表示域のリサイズ操作に伴って行の折返し位置が変化したとしても，行頭・行末が揃うように単語間隔が調整されます。リサイズして試してください。）：
A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the viewport. In the case of 'justify', theUAmay stretch the inline boxes in addition to adjusting their positions. (See also 'letter-spacing' and 'word-spacing'.)
| 値 | none | [ underline || overline || line-through || blink ] | inherit |
|---|---|
| 初期値 | none |
| 適用要素 | あらゆる要素 |
| 継承性 | なし（ただし，当該ボックスの子孫にも影響する） |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，要素のテキストに附加する装飾（下線や上線，取り消し線，点滅）を指定します。
子孫要素の持つ'text-decoration'プロパティは，祖先からの装飾になんらの影響も及ぼせられません。
テキスト装飾線の色は，'text-decoration' を設定した要素の'color'プロパティの値に由来せねばなりません。たとい子孫部の要素で前景色が異るにしても，装飾は同じ色のままになります。つまり子孫部で装飾を再定義しない限り，線の色は途中で変りません。
（参考：text-decorationの仕様を理解する 【Web標準普及プロジェクト】）
また，装飾線はマージン，ボーダーおよびパディングを越えて引かれ，これら領域間で断切られてはなりません。
【註】：子孫部に影響を及ぼす装飾線は，フォントサイズが一部異っていたり，上附き・下附きテキストに成っていたとしても，線が断切れて隙間が出来たり，位置がずれる事なく，子孫要素の全体を通して連続して引かれるべきです。CSS2.1では，テキスト装飾線の位置および太さを決定する際，UAは子孫部のフォントサイズおよび優勢なベースラインを考慮してもよい。ただし，各行で同一のベースラインおよび太さを使用せねばならない。
と述べています。しかしながら，そのように整えるブラウザは稀です。（参考図：望ましい装飾線； PNG形式）
多くの既存ウェブブラウザでは，先述のような恆常的な装飾線の位置および太さを保持するのとは対照的に，子孫要素に装飾を伝播させるだけの単純な整形により 'text-decoration' を実装しています。これはCSS2.0仕様の曖昧な言回しにより許容されていました。
各値は以下のような意味を持ちます； 'none' 以外の値は，空白類文字で区切って併用可能です：
none装飾を施さない。（補足：ある要素で 'none' を指定しても，祖先から影響を受けている装飾は無効化できません。）
underlineテキストに下線を引く。
overlineテキストに上線を引く。
line-throughテキストの中央に取消線を引く。
blinkテキストを点滅させる。適合User Agentでもこの値をサポートする義務はありません。
【註】：これはユーザの集中力を殺ぐかもしれません。制作者は別の表現手段を摸索すべきです。
いくつかの例外はあるが、クリックできることを最大限に訴えかけるためには、テキストリンクに色をつけてアンダーラインを引くべきだ。
| 値 | none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit |
|---|---|
| 初期値 | none |
| 適用要素 | あらゆる要素 |
| 継承性 | なし（ただし，当該ボックスの子孫にも影響する） |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，要素内のテキストにつける影を指定します。コンマ（,）区切りで複数の影もつけられます。
処理すべき影つけのアルゴリズムに関しては仕様書に譲ります。cf. CSS2勧告邦訳 16.3.2 文字に影を附ける
h1 { text-shadow: green 3px 3px 5px; }| 値 | normal | <length> | inherit |
|---|---|
| 初期値 | normal |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，テキストの文字間隔についてどう振舞うのか指定します。
各値は以下のような意味を持ちます：
normal現在のフォントでの標準の文字間隔を用いる。
この値が指定された場合，両端揃えのために文字間隔が調整されるかもしれません。
<length>文字間隔をデフォルトから更に増加（減少）させるのに，その追加分の長さを指定する。
負の値は不正ではありませんが，実装上は値に特定の制限範囲が生じる事もあります。
User Agentはテキストの両端揃えにおいて，'letter-spacing' の値からさらに文字間隔が増減されるのを防ぐかもしれません。つまり '0' の指定は 'normal' と同じく標準の文字間隔を用いるのですが，両端揃えの影響で文字間隔が改められるのを禁止できます。
CSS2.0以前の適合性では，このプロパティの値すべてを 'normal' として扱ってもよい，とされています。
単語の字間に空白文字を挿入すると，合成音声で正しく読上げられない確率が高くなります。たとえば「場 所」と記した場合，音声出力ブラウザに依っては「ばしょ」とは読上げられずに，「ば・ところ」のように読上げられるかもしれません。
またページの索引づけや検索，テキスト選択した語句からの検索実行（たとえば検索エンジン，辞書，百科事典，機械飜訳にデータを渡すなど）をしたい場合，餘計な空白が散在しているとデータベースに正しくマッチングしないので不便です。
'letter-spacing'プロパティを用いると，単なる空白文字を挿入するより細かい調整が出来ますし，音声出力ブラウザでも適切に読上げられます。また，点字ディスプレイを利用しているユーザも餘計な空白に混乱せずに，読めるようになります。
〔補足終了〕
| 値 | normal | <length> | inherit |
|---|---|
| 初期値 | normal |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，テキストの単語間隔（語間スペース）についてどう振舞うのか指定します。
（補足：ラテンのような分ち書きの表記体系では有用ですが，和文では餘り使い道がありません。）
各値は以下のような意味を持ちます：
normal標準の単語間隔として，現在のフォントおよびUAで定められる値にする。
<length>文字間隔をデフォルトから更に増加（減少）させるのに，その追加分の長さを指定する。
負の値は不正ではありませんが，実装上は値に特定の制限範囲が生じるかもしれません。
CSS2.0以前の適合性では，このプロパティの値すべてを 'normal' として扱ってもよい，とされています。
| 値 | capitalize | uppercase | lowercase | none | inherit |
|---|---|
| 初期値 | none |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，要素のテキストについて大文字と小文字の効果を制禦します。
各値は以下のような意味を持ちます：
capitalize各単語の先頭のみを大文字に変換する； 他の文字は影響を受けない。
uppercase各単語のすべての文字を大文字に変換する。
lowercase各単語のすべての文字を小文字に変換する。
none効果無し。
大文字と小文字の間で実際にどのような変換が行われるかは，書かれている言語/用字系に依って異ります。このプロパティの効果は，Unicodeにおいて “二種類の活字ケースを持つ用字系（bicameral scripts）” に属している文字だけに影響を与えます。
欧文の単語がすべて大文字で記されていると，合成音声で正しく読上げられない確率が高くなります。たとえば HELP と記した場合，音声ブラウザに依っては「ヘルプ」と読上げずに，「エイチイーエルピー」と綴りで一字づつ読上げる事があります。
'text-transform'プロパティを用いるとソース文書に手を加えずとも，容易に大文字・小文字の外見を制禦できます。つまりソース文書内での単語を実際に置換する訣ではないので，（適切に表記されていれば）どの値でも適切な音声に変換できます。
〔補足終了〕
| 値 | normal | pre | nowrap | inherit |
|---|---|
| 初期値 | normal |
| 適用要素 | あらゆる要素 |
| 継承性 | あり |
| パーセント値 | 受けつけない |
| メディアグループ | visual |
このプロパティでは，要素に含まれる空白類文字をどのように扱うかのか宣言します。
各値は以下のような意味を持ちます：
normal連続する空白類文字を一つの空白にまとめ，行ボックスが満たされると必要に応じて行を区切る。
pre連続する空白類文字の削除を禁止する。行区切りが生じるのはソース文書内での改行位置，あるいは生成内容の文字列として "\A" が挿入された位置でのみ行われます。したがって，ブロックボックスの外側に内容が溢れ出ることもあります。
nowrap'normal' と同様，連続する空白類文字を一つにまとめるが，自動的なテキスト折返しは行わない。
CSS2.1仕様ではさらに，次の値が新規に追加されました：
pre-wrap'pre' と同様，連続する空白類の削除を禁止するが，行ボックスが満たされると必要に応じて行を区切る。
つまり行区切りは，ソース文書内での改行位置，生成文字列として "\A" を挿入した位置でも行われる。
pre-line'normal' と同様，連続する空白類は一つにまとめられ，行ボックスが満たされると必要に応じて行を区切る。
さらに行区切りは，ソース文書内での改行位置，生成文字列として "\A" を挿入した位置でも行われる。
CSS2.0仕様では 'normal' と 'nowrap' においても，生成内容として"\A"が挿入された位置で改行されます。しかしCSS2.1ではそうではなく，エスケープ文字である"\A"で改行を生じるのは 'pre'，そして新設の 'pre-wrap' と 'pre-line' という値のみです。この仕様変更はおそらく，整形済みテキスト（pre-formatted）の効果を意図していない値において，"\A"で改行が生じてしまうのは非合理だからでしょう。
以上を踏まへて，CSS2.1で奨励されるデフォルト例では，生成内容に対して 'pre-line' を指定しています。
CSS2.0以前の適合性では，文書著者とユーザ指定によるこのプロパティを無視してもよい，とされています。
【註】：ソースコードを例示するなど “整形済み” の必然性があるなら，HTMLではまづpre要素を用いておくべきです。
【註】：'pre' または 'nowrap' を用いると，自動的な折返しは生じません。すなわち，文書中に長いテキストを内包している場合，それは表示域による横幅の制限を越えて，ユーザに横スクロールを強いるかもしれません。この状況は'overflow'プロパティで改善できます。
以下にしめす三つの引用文は，いづれも同じ内容で，ソース文書の同位置に空白類を記しています：
white-space: normalHigher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.white-space: preHigher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.white-space: nowrapHigher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.