The Web Design Group

テキスト・プロパティー

Text Properties



言葉(単語)間隔(Word Spacing)

構文: word-spacing: <value>
取りえる値: normal | <length>
初期値: normal
適用: 全ての要素
継承: 可能

word-spacingプロパティーは言葉(単語)間の追加空間を定義します。この値は length形式にすべきです;マイナス値は許されます。

例:

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

文字間隔(Letter Spacing)

構文: letter-spacing: <value>
取りえる値: normal | <length>
初期値: normal
適用: 全ての要素
継承: 可能

letter-spacingプロパティーは、文字間隔を定義します。値は length形式です;マイナス値も許されます。 0の設定は均等割(justification)を防ぎます。

例:

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

テキスト修飾(Text Decoration)

構文: text-decoration: <value>
取りえる値: none | [ underline || overline || line-through || blink ]
初期値: 無し
適用: 全ての要素
継承: 不可

text-decorationプロパティーで、テキストを五つのプロパティーの中の一つで飾ることができます: underlineoverlineline-throughblink乃至は初期値none

例としてリンクに下線を引いたものです

A:link, A:visited, A:active { text-decoration: none }

垂直配置(Vertical Alignment)

構文: vertical-align: <value>
取りえる値: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
初期値: baseline
適用: インライン要素
継承: 無し

vertical-alignプロパティーはインライン要素の垂直方向配置を、親要素乃至は要素の行に相対的に、変えるのに使われます。( インライン要素はその前後に強制改行がないもので、例えばHTMLの EMAそしてIMGです。)

値は、要素の line-heightプロパティーに相対的なpercentageで、親基準線の上に特定されたものに要素の基準線を持ち上げます。マイナス値も許されます。

値はキーワードのこともありえます。以下のキーワードは親要素に相対的な位置に影響を及ぼします:

要素の行に相対的な位置に影響を及ぼすキーワードは以下のものがあります。

vertical-alignプロパティーは画像配置用に特に有用です。以下のような例です:

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

テキスト変換(Text Transformation)

構文: text-transform: <value>
取りえる値: none | capitalize | 大文字 | 小文字
初期値: 無し
適用: 全ての要素
継承: 可能

text-transformプロパティーで、テキストを四つのプロパティーの中の一つに変換できます:

例:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

text-transformプロパティーは様式上の要求を表現するためだけに使用されるべきです。例えば、国や名称一覧を大文字化するのに text-transformを使うのは不適切です。


テキスト配置(Text Alignment)

構文: text-align: <value>
取りえる値: left | right | center | justify
初期値: ブラウザによって決められる
適用: ブロック−レベル要素
継承: 可能

text-alignプロパティーは ブロック−レベル要素PH1など)に適用され、要素のテキストの配置を与えます。このプロパティーは機能的にはHTMLのパラグラフ・見出し・ブロック区域の ALIGNと同じです。

例を以下にあげます:

H1          { text-align: center }
P.newspaper { text-align: justify }

テキスト字下げ(Text Indentation)

構文: text-indent: <value>
取り得る値: <length> | <percentage>
初期値: 0
適用される: ブロック−レベル要素
継承:

 text-indentプロパティをブロック−レベル要素PH1など)に適用することができ、要素の最初の行が受けるべき字下げの数を定義します。その値はlengthpercentageでなければなりません;パーセンテージは親要素の幅を参照します。 text-indentの普通の使い方は、パラグラフの字下げです:

P { text-indent: 5em }

行の高さ(Line Height)

構文: line-height: <value>
取りえる値: normal | <number> | <length> | <percentage>
初期値: normal
適用: 全ての要素
継承: 可能

line-heightプロパティーは、テキストの基準線との間の空間(隙間)を制御する値を受け入れます。その値は数値の場合行の高さは要素の文字サイズに数値掛けて計算されます。パーセント値は要素の文字サイズに対する相対的なものです。マイナス値は許されません。

行の高さは、 fontプロパティー内で文字サイズにそって与えられることもできます。

line-heightプロパティーはダブル・スペース・テキストに使うこともできます:

P { line-height: 200% }

Microsoft Internet Explorer 3.xは、数値値やピクセル値としての em乃至は ex単位を不正確に処理します。このバグでページが判読しにくくなりますので、制作者はできるだけそれを引き起こすことを避けなければなりません;パーセント単位はいい選択であることがおおいようです。


Maintained by John PozadzidesLiam Quinn


Web Design Group ‾ CSSインデックスCSS構造CSSプロパティー

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.