8. テキスト
ここでは、字下げや揃えなどのテキストに効果を与える主なプロパティについて説明する。
text-indentプロパティ
「text-indentプロパティ」は、矩形ブロックに含まれるテキストの先頭行にインデント(字下げ)を指定する。 その書式は以下のとおりである。
text-indentプロパティ | |
---|---|
値 | <長さ> | <%値> | inherit |
初期値 | 0 |
適用対象 | ブロックレベル要素、テーブルセル要素、inline-block要素 |
継承 | する |
パーセント値 | 包含ブロックの横幅に対する割合 |
- 長さ
- 字下げ幅をem、exなどの単位付き長さで指定する。負の値を指定することもできる。
p { text-indent: 1em; }
- %値
- 包含ブロック(※ 包含ブロックについては後述する。)の横幅に対する割合を指定する。
- inherit
- 親要素のインデント幅を継承する。
text-alignプロパティ
「text-alignプロパティ」は、矩形ブロックに含まれるテキストの揃え方を指定する。 その書式は以下のとおりである。
text-alignプロパティ | |
---|---|
値 | left | right | center | justify | inherit |
初期値 | UAおよび表記方向に依存する |
適用対象 | ブロックレベル要素、テーブルセル要素、inline-block要素 |
継承 | する |
パーセント値 | 受けつけない |
- left
- ブロック内のテキストを左揃えにする。
- right
- ブロック内のテキストを右揃えにする。
- center
- ブロック内のテキストを中央揃えにする。
- justiify
- ブロック内のテキストを両端左揃えにする。
- inherit
- 親要素の揃え方を継承する。
"justify"による両端揃えは欧文系の文書に有効となるブラウザは多いが、日本語の両端揃えを行うブラウザは、ごく一部に限られる。 また、ブロック内の最終行は両端揃えされない。
"text-alignプロパティ"は継承性があるので、注意が必要である。例えば、
div { text-align: center; }
というスタイル指定があるとき、つぎのHTMLコードを考えてみる。
<div>
<p>この段落内のテキストはすべて中央揃えで出力されます</p>
</div>
この場合、div要素に中央揃えが指定されており、それが継承されるため、 div要素の子要素であるp要素も中央揃えになり、その段落ブロック内も中央揃えされる。
text-decorationプロパティ
「text-decorationプロパティ」は、テキストに与える装飾(上線、下線、取り消し線、点滅)を指定する。 その書式は以下のとおりである。
text-decorationプロパティ | |
---|---|
値 | none | [ underline || overline || line-through || blink ] | inherit |
初期値 | none |
適用対象 | すべての要素 |
継承 | しない |
パーセント値 | 受けつけない |
- none
- テキストに装飾を与えない。
- underline
- テキストに下線を付加する。線色は"colorプロパティ"で与えられた色になる。
- overline
- テキストに上線を付加する。線色は"colorプロパティ"で与えられた色になる。
- line-through
- テキストに取り消し線を付加する。線色は"colorプロパティ"で与えられた色になる。
- blink
- テキストを点滅させる。ただし、この機能を実装していないブラウザも多く存在する。
- inherit
- 親要素の装飾を継承する。
以下に使用例を示す。
em { text-decoration: underline }
em.cancel { text-decoration: line-throgh }
white-spaceプロパティ
「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 }