Part 1. Let's begin CSS : Chapter 1. “入門:CSS2”

1.10 テキストの装飾

 ここでは,下線・打ち消し線などの基本的なテキストの装飾,および,CSS2 で追加されたテキストにドロップシャドウを付加するプロパティを紹介する。

テキストの装飾:text-decoration プロパティ

 簡単なテキストの装飾効果は text-decoration プロパティで指定する。与え方は次のいずれかである。

text-decoration: キーワード;
text-decoration: none;

このプロパティは,

  • すべての要素に適用される。ただし,その要素がテキストでない場合(画像など)は,意味を持たない。
  • 初期値は,キーワード none である。
  • その要素で text-decoration プロパティを指定しなかった場合,プロパティの値は初期値に戻される。ただし,それまで(親要素)で装飾が指定されていた場合には,その装飾は引き続いて行われる。

 キーワード none を与えた場合には,テキストの装飾は行われない。それ以外のキーワードは,次にあげるものから順序に関係なく,複数選んでよい。

underline
テキストに下線を引く。
overline
テキストにオーバーラインを引く。
line-through
テキストに打ち消し線を引く。
blink
テキストを点滅させる。これをサポートしないブラウザもある。

 まずは,簡単な例をご覧いただこう。

H1 { text-decoration: underline overline; }
A { text-decoration: none; }

<H1>ed ドメイン</H1>
<P> “すべての学校にインターネットを”を受けて,小中高校をはじめとした教育機関に ed.jp のドメインが割り当てられる。この作業は,<A HREF="http://www.nic.ad.jp/">JPNIC</A> で 1998年から進められている。</P>

ed ドメイン

 “すべての学校にインターネットを”を受けて,小中高校をはじめとした教育機関に ed.jp のドメインが割り当てられる。この作業は,JPNIC で 1998年から進められている。

 ところで,text-decoration プロパティで指定される装飾は,その要素の color プロパティで与えられる色になる。このとき注意しなくてはいけないのは,下線などが引かれている状態で,text-decoration プロパティを再指定せずにテキストの色を変えても,その色はそこで指定したテキストの色にはならないことである。たとえば,

P { text-decoration: underline; color: black; }
EM { color: red; }

において,

<P> プログラマは,プログラミング言語に関して保守的だという。しかし,その中で C++ で受け入れられたのは,多くのプログラマの支持を得ていた <EM>C からの移行が簡単だった</EM>からと言える。その反面,C++ は<EM>不完全なオブジェクト指向</EM>という短所を背負い込んだ。</P>

EM 要素の下線は,文字色が赤に指定されているにも関わらず,黒となる。

 プログラマは,プログラミング言語に関して保守的だという。しかし,その中で C++ で受け入れられたのは,多くのプログラマの支持を得ていた C からの移行が簡単だったからと言える。その反面,C++ は不完全なオブジェクト指向という短所を背負い込んだ。

IE4, 5
text-decoration プロパティについて,blink はサポートされない。装飾の色は,つねにその要素の color プロパティの値に一致してしまう。
IE5.5, 6
text-decoration プロパティについて,blink はサポートされない。

テキストの影:text-shadow プロパティ

 text-shadow プロパティは,テキストへの影の効果を指定するものである。

text-shadow: 影の性質, 影の性質, ...;
text-shadow: none;

このプロパティは,

  • すべての要素に適用される。ただし,その要素がテキストでない場合(画像など)は,意味を持たない。
  • 初期値は,キーワード none である。
  • その要素で text-shadow プロパティを指定しなかった場合,プロパティの値は初期値に戻される。ただし,それまで(親要素)で影が指定されていた場合には,その影は引き続いて付加される。

 キーワード none は,影を付加させない。影を付加するには,“影の性質”を記述したカンマ区切りリストを与える。影は,このカンマ区切りリストの順で重ねられていく。この書式は,

横位置 縦位置 ぼかし半径 色
色 横位置 縦位置 ぼかし半径

のいずれかである。ただし,“ぼかし半径”,“色”はいずれかまたは両方を省略してもよい。

  • “横位置”,“縦位置”では,影の位置を長さで与える(負の値も許される)。通常のテキストの位置を基準にして,横は右方向を,縦は下方向を正にとる。たとえば,3px 2px であれば,影はテキストの 3 ピクセル右,2 ピクセル下にできる。-3px -2px ならば,3 ピクセル左,2 ピクセル上になる。
  • “ぼかし半径”は影をぼかすとき,その半径を長さで与える(負の値は許されない)。省略すると 0,すなわち影はぼかされない。
  • “色”は影の色である。省略された場合は,color プロパティの値と同じになる。ぼかし半径が 0 の場合は,影は指定された色そのものになる。ぼかし半径が 0 でなければ,影の色は指定された色を基調とする。

 簡単な例をご覧いただこう。

H1 { color: black; text-shadow: 3px 3px silver; }

<H1>ガウス分布</H1>

この場合,テキストから右に 3ピクセル,下に 3ピクセルの位置に銀色の影が落とされる。

ガウス分布

 複数の影を落としてみよう。

H1 { color: black; text-shadow: silver -5px 5px 4px, #CCF 0 0 2px; }

 最初は,テキストから左に 5ピクセル,下に 5ピクセルの位置に,ぼかし半径 4 ピクセルの銀色の影である。2 番めの影はそれに重ねて描かれる。テキストと同じ位置に,ぼかし半径 2 ピクセルの,淡い青色の影ができる。これを先の例と同じ HTML に適用させると,

ガウス分布

となる。

IE4, 5, 5.5; NN6
text-shadow プロパティは未サポート。