SITEMAP [初めてのホームページ講座] [CSS] [CSS1] [プロパティ一覧] [テキスト]

CSS1 Reference

プロパティ

3. テキスト


3-1. word-spacing

normal | <length>
初期値
normal
適用要素
全て
継承性
有り
割合指定
無し
P  { word-spacing : 0.1em; }   /*P要素の単語間隔はフォントサイズの0.1倍*/
EM { word-spacing : 0.5em; }   /*EM要素の単語間隔はフォントサイズの0.5倍:強調*/

長さ指定により、単語と単語の間隔を調整可能です。 指定する値は、単語間隔の追加分で、負の値も指定可能ですが、実装上限界があります。 このプロパティに関する仕様はブラウザ側で決定可能で、「text-align」の影響も受けます。

日本語において、このプロパティの解釈は難しく、サポートされることは無いと考えられます。

normal
通常の単語間隔

CSS1コア:ブラウザは如何なる「word-spacing」も「normal」として良いとされています。

[Go To Top]

3-2. letter-spacing

normal | <length>
初期値
normal
適用要素
全て
継承性
有り
割合指定
無し
P  { letter-spacing : 0.1em; }   /*P要素の文字間隔はフォントサイズの0.1倍*/
EM { letter-spacing : 0.5em; }   /*EM要素の文字間隔はフォントサイズの0.5倍:強調*/

長さ指定により、文字と文字の間隔を調整可能です。 指定する値は、単語間隔の追加分で、負の値も指定可能ですが、実装上限界があります。 このプロパティに関する仕様はブラウザ側で決定可能で、「text-align」の影響も受けます。

normal
通常の文字間隔

CSS1コア:ブラウザは如何なる「letter-spacing」も「normal」として良いとされています。

[Go To Top]

3-3. text-decoration

none | [ underline || overline || line-through || blink ]
初期値
none
適用要素
全て
継承性
無し(透明処理される)
割合指定
無し
EM { text-decoration : underline; }   /*EM要素に下線の装飾*/
A  { text-decoration : none; }        /*A要素に下線も何も付けない*/

指定した要素に付加する装飾を指定します。 継承はありませんが、親要素の影響を受け、子要素までその装飾を受けます。 また、子要素の色が異なっていても親要素の色を継承します。

内容のない要素、例えば<EM></EM>などであれば、その装飾を施すことはありません。 (だからといって、HTML4.0ではA要素やP要素の空要素は推奨されていません)

ブラウザは必ずしも「blink」をサポートしているとは限りませんが、認識はしているようです。 (某ブラウザの影響か?)

none
装飾無し
underline
アンダーライン(下線)
overline
オーバーライン(上線)
line-through
取消線
blink
点滅
[Go To Top]

3-4. vertical-align

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
初期値
baseline
適用要素
インライン要素
継承性
無し
割合指定
その要素の行間(line-height)に対する割合
SPAN { vertical-align : sub; }   /*下付き文字*/

インライン要素のみに指定可能で、親要素に対する相対位置を指定する場合もあります。 このプロパティにより、上下位置の調整が可能です。

割合指定した場合、その要素の行間(line-height)に対する割合分だけベースラインを上げます。 負の指定をした場合は逆に下に下げます。 ベースラインを持たない要素(例えば画像など)の上下位置の関係を緻密に設定することも可能です。

baseline
親要素とベースラインを合わせる
sub
下付き文字
super
上付き文字
top
上位置をその行の最も高い要素の上に合わせる
text-top
上位置を親要素の上に合わせる
middle
中央を親要素の小文字の中央と合わせる
bottom
下位置(ベースライン)を親要素の下(ベースライン)に合わせる
text-bottom
下位置(ベースライン)をその行の最も低い要素の下(ベースライン)に合わせる
[Go To Top]

3-5. text-transform

capitalize | uppercase | lowercase | none
初期値
none
適用要素
全て
継承性
有り
割合指定
無し
P { text-transform : none; }    /*継承値を無効にし、記述通りに表示*/

要素内の文字を大文字や小文字に変更します。 ただし、日本語ではこの機能は全く意味が無く(少なくともアルファベットは問題ないが)、ブラウザもこの機能を必ずしも持っているとは限りません。

capitalize
単語の先頭のみ大文字に変更
uppercase
全て大文字に変更
lowercase
全て小文字に変更
none
継承値を無効にする

CSS1コア:ブラウザは場合によっては、「text-transform」を無視(「none」として扱って)良いとされています。

[Go To Top]

3-6. text-align

left | right | center | justify
初期値
ブラウザ標準
適用要素
ブロックレベル要素
継承性
有り
割合指定
無し
DIV { text-align : center; }   /*DIV要素を中央揃えにする*/

ブラウザの表示部分(キャンバス)に対するものではなく、指定した要素の表示部分に対する文字揃えの指定を行います。 「justify」を指定した場合も同様で、要素の表示部分に対する均等割付を行います。

left
左詰め
right
右詰め
center
中央揃え
justify
均等割付

CSS1コア:書字方向により「justify」を「left」「right」とみなしても良いとされています。

[Go To Top]

3-7. text-indent

<length> | <percentage>
初期値
0
適用要素
ブロックレベル要素
継承性
有り
割合指定
親要素の幅(width)に対する割合
P { text-indent : 1.5em; }   /*フォントサイズの1.5倍だけ字下げ(インデント)*/

ブロックレベル要素のみに適用可能で、その要素の先頭の1行目の字下げ(インデント)を指定します。 BR要素などで強制的に改行したような場合は無視されますので、注意が必要です。

負の数値も指定可能ですが、これはブラウザの仕様に左右されます。

これまでのHTMLでは、行頭にスペースを強制的に入れてインデントを実現してきましたが、CSSではそのインデント量も含めて設定できるようになりました。

[Go To Top]

3-8. line-height

normal | <number> | <length> | <percentage>
初期値
normal
適用要素
全て
継承性
有り
割合指定
その要素のフォントサイズに対する割合
BODY { line-height : 1.3em; }   /*文書全体の行間をフォントサイズの1.3倍*/

行間(上下に隣接する行のベースラインの幅)を指定します。 継承時はその割合指定や相対値を継承するのではなく、その計算結果 (例えばサイズ12ptに対して1.5emと指定すると、1.5emではなく、18pt)が継承されます。 ですので、途中でフォントサイズが変わっても行間は変わらない (例えば、途中の要素でサイズ20ptに変更すると行間は18ptが継承され、行間がサイズより小さくなり重なって見える)ので注意が必要です。

ただし、継承性について一部例外があります。 「<length>」で相対値指定(em)した場合は上記の計算結果の継承を行いますが、 「<number>」の場合のみ異なります。 この場合、計算結果ではなく、その倍率そのものを継承するので、子要素の行間も子要素のフォントサイズによって変化します。 これらは微妙な使い分けが必要です。

如何なる場合も負の値は使用できません。

normal
通常の行間(ブラウザによる)
<number>
無単位のフォントサイズの何倍かを指定(感覚的にはemと同じ)
[Go To Top]

Last modified Apr,2002
Copyright(C)1999 Miyazaki , All Rights Reserved.