テキスト

例

言葉（単語）間隔（Word Spacing）

word-spacingとは、単語同士の間隔を指定するためのプロパティです。

実数値に単位を付けて指定します。初期値はnormalであり、標準的な間隔が設定されます。

Functional list
書式 word-spacing: <value:値>
値 normal |<length>
初期値 normal
適用要素 全ての要素
継承性 可能

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

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

単語間のスペース制御

up

文字間隔（Letter Spacing）

letter-spacingとは、文字の間隔を指定するためのプロパティです。実数値に単位をつけて指定しますが、マイナス を指定することもできます。初期値はnormalであり、標準的な間隔で表示されます。

Functional list
書式 letter-spacing: <value:値>
値 normal |<length>
初期値 normal
適用要素 全ての要素
継承性 可能

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

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

行間や文字間を空けて文章を読み易くする

up

テキスト修飾（Text Decoration）

text-decorationとは、文字に装飾を加えるためのプロパティです。値には、下線を加えるunderline、上線を加えるoverline、取り消し線を加えるline-throughが指定できます。初期値はnoneであり、何の装飾も付け加えられません。

Functional list
書式 text-decoration: <value:値>
値 none | [underline ||overline ||line-through ||blink ]
初期値 無し
適用要素 全ての要素
継承性 不可

text-decorationプロパティーで、テキストを五つのプロパティーの中の一つで飾ることができます：underline・overline・line-through・blinkまたは初期値none。

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

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

テキストの修飾

up

垂直配置

vertical-alignとは、要素の縦方向の位置を指定するためのプロパティです。初期値はbaselineであり、指定したボックスとその親ボックスのベースラインを揃えます。テーブルセルにbaselineを適用したときは、各セルの最初の行のベースラインを揃えます。

ほかにtop、middle、bottom、text-top、text-bottom、super、subなどのキーワードで、あるいはベースラインが揃った状態からの移動量を実数値に単位を付けて位置を指定することができます。

Functional list
書式 vertical-align: <value:値>
値 baseline |sub |super |top |text-top |middle |bottom |
text-bottom |<percentage>
初期値 baseline
適用要素 インライン要素
継承性 無し

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

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

以下のキーワードは親要素に相対的な位置に影響を及ぼします：

  • baseline（要素と親の基準線の配置）
  • middle（基準線プラスx-heightの半分−−親のletter "x"の高さ）
  • sub（下付添え字）
  • super（上付添え字）
  • text-top（要素と親文字の先端配置）
  • text-bottom（要素と親文字の底辺配置）

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

  • top（行中最も高い要素をもった要素の先端配置）
  • bottom（行中最も低い要素をもった要素の底辺配置）

vertical-alignプロパティーは画像配置用に特に有用です。

以下のような例です：

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

上下の表示位置vertical-align

up

テキスト変換（Text Transformation）

text-transformとは、文字の表記において大文字と小文字の使い分けを指定するためのプロパティです。すべて大文字で表示するuppercase、すべて小文字で表示するlowercase、単語の最初の一文字を大文字で表示するcapitalizeを指定することができます。初期値はnoneであり、そのまま表示します。

Functional list
書式 text-transform: <value:値>
値 none |capitalize |大文字 |小文字
初期値 無し
適用要素 全ての要素
継承性 可能

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

  • capitalize（各単語の最初の文字を大文字に）
  • uppercase（各単語の全ての文字を大文字に）
  • lowercase（各単語の全ての文字を小文字に）
  • none（初期値）
H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

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

英文の大文字小文字制御

up

テキスト配置（Text Alignment）

text-alignとは、行揃えを指定するためのプロパティです。値には、左寄せにするleft、右寄せにするright、中央寄せにするcenter、行の両端を揃えるjustifyが指定できます。また、th要素およびtd要素に対しては、縦方向で揃えたい文字列を指定することができます。

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

text-alignプロパティーはブロック−レベル要素（ P・ H1など）に適用され、要素のテキストの配置を与えます。

このプロパティーは機能的にはHTMLの段落・見出し・ブロック区域の ALIGNと同じです。

例を以下にあげます：

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

左右の表示位置制御

up

テキスト字下げ

text-indentとは、文章の最初の行のインデントを指定するためのプロパティです。インデントの量は、実数値に単位を付けて指定します。マイナス を指定することもできます。初期値は0で、インデントしないよう指定されています。

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

text-indentプロパティをブロック−レベル要素（ P・ H1など）に適用することができ、要素の最初の行が受けるべき字下げの数を定義します。その値はlengthかpercentageでなければなりません；パーセンテージは親要素の幅を参照します。text-indentの普通の使い方は、段落の字下げです：

P { text-indent: 5em }

up

行の高さ（Line Height）

line-heightとは、行の高さを指定するためのプロパティです。初期値はnormalであり、ブラウザが自動的に適切な高さを設定します。値には実数値、もしくは実数値に単位をつけて指定します。単位をつけない場合には、フォントの大きさにその数値をかけたものが行の高さになります。

Functional list
書式 line-height: <value:値>
値 normal | <number> |<length> |<percentage>
初期値 normal
適用要素 全ての要素
継承性 可能

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

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

P { line-height: 200% }

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

文字を重ねる

up

HOMEの次スタイルシートの次テキスト


目的別属性

広告