テキスト -

8. テキスト

ここでは、字下げや揃えなどのテキストに効果を与える主なプロパティについて説明する。

「text-indentプロパティ」は、矩形ブロックに含まれるテキストの先頭行にインデント（字下げ）を指定する。その書式は以下のとおりである。

text-indentプロパティ
値	<長さ> \| <％値> \| inherit
初期値	0
適用対象	ブロックレベル要素、テーブルセル要素、inline-block要素
継承	する
パーセント値	包含ブロックの横幅に対する割合

長さ

字下げ幅をem、exなどの単位付き長さで指定する。負の値を指定することもできる。

p { text-indent: 1em; }

％値

包含ブロック(※ 包含ブロックについては後述する。)の横幅に対する割合を指定する。

inherit

親要素のインデント幅を継承する。

「text-alignプロパティ」は、矩形ブロックに含まれるテキストの揃え方を指定する。その書式は以下のとおりである。

text-alignプロパティ
値	left \| right \| center \| justify \| inherit
初期値	UAおよび表記方向に依存する
適用対象	ブロックレベル要素、テーブルセル要素、inline-block要素
継承	する
パーセント値	受けつけない

"justify"による両端揃えは欧文系の文書に有効となるブラウザは多いが、日本語の両端揃えを行うブラウザは、ごく一部に限られる。また、ブロック内の最終行は両端揃えされない。

"text-alignプロパティ"は継承性があるので、注意が必要である。例えば、

div { text-align: center; }

というスタイル指定があるとき、つぎのHTMLコードを考えてみる。

<div>
    <p>この段落内のテキストはすべて中央揃えで出力されます</p>
</div>

この場合、div要素に中央揃えが指定されており、それが継承されるため、 div要素の子要素であるp要素も中央揃えになり、その段落ブロック内も中央揃えされる。

「text-decorationプロパティ」は、テキストに与える装飾（上線、下線、取り消し線、点滅）を指定する。その書式は以下のとおりである。

text-decorationプロパティ
値	none \| [ underline \|\| overline \|\| line-through \|\| blink ] \| inherit
初期値	none
適用対象	すべての要素
継承	しない
パーセント値	受けつけない

以下に使用例を示す。

em { text-decoration: underline }
em.cancel { text-decoration: line-throgh }

「white-spaceプロパティ」は、要素内に記述された空白の取扱い方を指定する。その書式は以下のとおりである。

white-spaceプロパティ
値	normal \| pre \| nowrap \| pre-wrap \| pre-line \| inherit
初期値	normal
適用対象	すべての要素
継承	する
パーセント値	受けつけない

normal: 連続する空白を圧縮し、行ボックス(※ ボックスの詳細については後述する。)を超える場合は改行する。また、任意の位置で改行させる場合は、"\A"(※ PCの環境によっては、記号"＼"は記号"￥"と表現される。)を生成内容として出現させる。
pre: 連続する空白の圧縮を禁止し、改行はソース内の位置か、生成内容として"\A"が出現した位置で改行する。
nowrap: 連続する空白の圧縮するが、自動的な改行は行わない。ただし、生成内容として"\A"が出現した位置でのみ改行する。
pre-wrap: 連続する空白の圧縮を禁止し、改行はソース内の位置か、生成内容として"\A"が出現した位置および行ボックスを超える場合に改行する。(※ "pre-wrap"と"pre-line"のプロパティはCSS 2.1で追加されたプロパティである。)
pre-line: 連続する空白を圧縮し、改行はソース内の位置か、生成内容として"\A"が出現した位置および行ボックスを超える場合に改行する。
inherit: 親要素の取扱い方法を継承する。

以下に使用例を示す。

pre       { white-space: pre }
p         { white-space: normal }
td.nowrap { white-space: nowrap }