CSS講座

テキスト関連

text-decoration - テキストの装飾

テキストの装飾を行う場合に使用します。

指定可能な値は、none, underline, overline, line-through, inherit です。

none(規定値)
特別な装飾は行われません。
text-decoration: none;
特別な装飾は行われません。
underline
下線が引かれます。
text-decoration: underline;
下線が引かれます。
overline
上線が引かれます。
text-decoration: overline;
上線が引かれます。
line-though
打ち消し線が引かれます。
text-decoration: line-through;
打ち消し線が引かれます。

多分、none と underline 以外を使うことは滅多に無いと思います。ちなみに、線の色はフォントと同じ色が使われます。

また、値を複数指定することができ、

下線、上線、打ち消し線を同時に指定することもできます。

のような使い方もできます。(絶対に使用することは無いですね。)

text-align - テキストの配置

テキスト(インライン要素)の配置を指定します。

指定可能な値は、 left, center, right です。

left(規定値)
左揃えを行います。
text-align: left;
左揃えを行います。
underline
中央揃えを行います。
text-align: center;
中央揃えを行います。
overline
右揃えを行います。
text-align: right;
右揃えを行います。

簡単ですね。ただ、注意したいのは(本来)このプロパティでブロック要素の配置はできないということです。このことについてはCSSレイアウトのページに詳しい説明しています。

text-indent - テキストの字下げ

テキストの字下げを行う場合に使用します。

テキストの字下げ・・・一体何のことかと言うと、日本語では、段落の書き始めは一文字空けて書くことになっていますよね。その、段落の始めだけ1文字分インデントを行うようにするためのプロパティがtext-indentだと思ってください。

ということで、このプロパティの使い方は下の例ぐらいしかないような気がします。

p { text-indent: 1em; }

段落(pタグ)の開始は1em(1文字分の幅)字下げを行うという意味です。

letter-spacing - 文字間のスペース

各文字間のスペースを指定するときに使用します。

指定可能な値は、normal もしくは 1em、3px などの単位付きの数字です。

normal(規定値)
通常の文字間隔で表示します
letter-spacing: normal;
通常の文字間隔で表示します。
1em
文字間隔1emで表示します
letter-spacing: 1em;
文字間隔1emで表示します。(一文字分のスペース空き)