ホームページの基礎（2. CSS 編） - HITP 広島工業大学専門学校

2.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; }

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

<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 }