テキスト

テキストに関する属性は次の表に示す8種類がある。

テキストの属性
属性 意味
word-spacing 単語間のスペースの指定
letter-spacing 文字間のスペースの指定
text-decoration 文字の装飾の指定
vertical-align 文字の垂直方向の位置指定
text-transform 文字の変形の指定
text-align 文字の水平方向の位置指定
text-indent 字下げの指定
line-height 行の高さ指定

word-spacing

単語間の間隔を指定する属性。指定する属性は次のとおり。

次の例は単語間の間隔を現在のフォントの1文字分の高さにするものです。

H1 { word-spacing : 1em }

使用例

word-spacingの表示例。この段落は指定なしです。

word-spacingの表示例。この段落は1emを指定しています。

This is word-spacing sample.

letter-spacing

文字間の間隔を指定する属性。word-spacingと同様の値(normalあるいは数値)を指定する。

letter-spacingの表示例。この段落は指定なしです。

letter-spacingの表示例。この段落は指定なしです。

This is letter-spacing sample.

text-decoration

文字の装飾を指定する属性。指定できる値を次の表に示す。

文字装飾の値
意味
none 装飾なし
underline 下線をつける
overline 上線をつける
line-through 字消し線をつける
blink 点滅させる

使用例

アンカーの下線を表示しない。

A { text-decoration: none }

Yahoo!Japanへのリンク

text-decoration : underline
underlineを付ける
text-decoration : overline
overlineを付ける
text-decoration : line-through
line-throughを付ける
text-decoration : blink
blinkを付ける

vertical-align

文字の垂直方向の位置を指定する属性。指定できる値を次の表に示す。IEやNNはこの属性をすべて正しく表示できない。

vertical-alignの値
意味
baseline ベースラインに揃える
sub 文字を下付で表示
super 文字を上付きで表示
top 文字を丈夫に揃える
text-top 文字の上部をそれを含む範囲の丈夫に揃える
middle 文字の中央線を揃える
bottom 文字の下部を揃える
text-bottom 文字の下部をそれを含む範囲の下部に揃える

text-align

文字列の水平方向での表示位置を指定する属性。指定できる値を表に示す。

text-align属性の値
意味
left 左寄せ
right 右寄せ
center 中央揃え
justify 両端揃え

使用例

H1要素を行の中央に表示する。

H1 { text-align : center }

text-align="right"

text-align="center"

text-align="justify"

text-indent

字下げを指定する属性。字下げの幅を数値あるいはパーセンテージで指定する。次の例は字下げを現在のフォントの一文字分の高さにする記述です。

P { text-indent : 1em }

line-height

行の高さを指定する属性。属性の値にはnormal、倍率、長さ、パーセンテージのいずれかを指定する。

使用例

段落の文字を10ポイントにし、行の高さを12ポイントにする。三つとも同じ結果になる。

P { line-height : 1.2; font-size : 10pt; }
P { line-height : 1.2em; font-size : 10pt; }
P { line-height : 120%; font-size : 10pt; }