×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

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 }

ページの先頭に戻る


Copyright c 2006-2007 御隠居 (滄洲). All Rights Reserved.