Section 4 : テキストの装飾

 Fiest step CSS の Section 5Section 6 で基本的なテキスト装飾の属性を紹介したが,このほかにもいくつかのテキスト装飾にかかわる属性がある。それらを見ていこう。

単語の間隔:word-spacing 属性

 letter-spacing-属性が文字間隔を決めるのに対して,この word-spacing 属性は欧文などにおける単語と単語の間隔を定める。すべての要素に適用される。

word-spacing: (長さ);

 長さは cm,em,px などを伴って指定され,単語間隔は既定値の間隔にこの長さを加えたものになる。また,キーワード normal で指定されるのは“標準の長さ”で,これは初期値。word-spacing 属性の値は継承される

 長さに負の値を与えてもかまわないが,あまり無理な値にすることはできない。

<P STYLE="font-family: Verdana, Chicago, Arial, sans-serif; word-spacing: 2em;">The space between words is increased by 2em here.</P>

The space between words is increased by 2em here.

 この属性に関しては,サポートされていない(何を指定しても normal と同じ扱いになる)場合もある。

 IE3/4/5, NN4  word-spacing 属性はサポートされていない。

テキストの装飾:text-decoration 属性

 text-decoration 属性は,範囲のテキストに対して装飾を施すものである。すべての要素に指定できるが,<IMG> などの非テキスト要素には意味を持たない(適用されない)。

text-decoration: (キーワード);

 キーワードは次のようなものがある。

none
何も装飾をしない。初期値。この none 以外を指定する場合は,複数の値を与えてよい。
underline
下線。
overline
オーバーライン。
line-through
打ち消し線。
blink
点滅。ただし,このキーワードは認識されてもブラウザが点滅させないことがある。

 “複数の値を与えることができる”というのは,たとえば,アンダーラインとオーバーラインを同時に引くことができるということである。

 この属性値は原則として継承されないが,線などは引かれ続けるので見かけ上継承されているように見える。

<P STYLE="text-decoration: overline;">このパラグラフはオーバーラインが引かれ,<SPAN STYLE="text-decoration: line-through;">範囲に打ち消し線</SPAN>が引かれます。</P>
<P STYLE="text-decoration: underline overline;">同時に 2 つを指定した例です。</P>

このパラグラフはオーバーラインが引かれ,範囲に打ち消し線が引かれます。

同時に 2 つを指定した例です。

 IE3/4/5  blink は処理されない。

 IE3  指定できるキーワードが一部異なる。

 NN4  overline はサポートされていない。

大文字・小文字:text-transform 属性

 text-transform-属性は,主に欧文において,大文字・小文字の操作を行う。和文にはなじみがないが,テキスト装飾の属性として紹介しておこう。

text-transform: (キーワード);

 指定できるキーワードは次のとおり。

none
大文字,小文字の操作は行わない。初期値。
capitalize
単語の先頭の文字を大文字にする。
uppercase
すべて大文字にする。
lowercase
すべて小文字にする。

 この属性値は継承される

<DIV STYLE="font-family: Times, serif">
  <H2 STYLE="text-transform: uppercase;">text properties</H2>
  <P STYLE="text-transform: capitalize">One of the text properties is <SPAN STYLE="text-transform: none;">'text-transform'</SPAN> property.</P>
</DIV>

text properties

One of the text properties is 'text-transform' property.