ばけらの CSSリファレンス

text-indent プロパティは、ブロック要素にのみ適用されるプロパティです。そのブロックの中の最初の行ボックスの左(書字方向が rtl なら右)に、指定された幅のインデントを設定します。単純に言えば、最初の行の先頭に幾ばくかの余白を設けることになります。

日本語の文書でよく使われるのは、p{ text-indent: 1em; } という指定でしょう。この指定で、各段落の頭を1マス空けることができます。

負の値も指定できますが、環境によっては動作しないかも知れません。

text-align プロパティは、ブロック要素にのみ適用されるプロパティです。ブロックの幅より狭い幅のインラインボックスがあったとき、それをどう配置するかを指定します。

• left …… 左寄せ

• right …… 右寄せ

• center …… 中央寄せ

• justify …… 均等割付

justify の指定は、インラインボックスの幅を行ボックスの幅まで広げて文字を均等割付しますが、具体的な動作は環境に依存します。なお、この指定は、letter-spacing や word-spacing の影響を受けます。

text-align: の値として文字を指定することも出来ます。これはテーブルのセルのみに有効な指定です。たとえば、表のある列に小数を含む数値データが並んでいるとき、text-align: "." と指定すると、小数点の位置を揃える事が出来ます。テーブル以外の要素に適用された場合、この指定は無視され、書字方向に応じて left や right とみなされます。

text-align の初期値は環境依存ですが、書字方向が ltr であれば left, rtl であれば right になるでしょう。

text-align: center の指定がブロック要素をセンタリングしないことに注意してください。text-align はあくまでブロックの中のインラインボックスをどう配置するかという指定であって、ブロックの中のブロックの位置は指定しません。従って、

DIV.data{text-align: center}
DIV.data table{width: 80%; margin-left: 0}
...

<DIV class="data">
<TABLE>
...

……となっていたとき、DIV の中の TABLE はセンタリングされません。ただし、text-align は継承しますので、TABLE の中のテキストはセンタリングされることになります。何故かブロック要素も見境無くセンタリングしてしまうブラウザが存在しているようですが、誤りです。

ちなみに、ブロック要素をセンタリングするには、margin-left と margin-right に auto を指定します。しかしながら、対応していないブラウザも多いようです。

text-decoration プロパティはインライン要素のテキストを装飾します。ブロックレベルの要素に適用すると、その効果は中身のインライン要素に及びます。テキストを含まない要素に適用しても無視されます。

text-decoration プロパティには、以下のような値が指定できます。

• none …… なにも装飾しません。

• underline …… 各行のテキストに下線をつけます。

• overline …… 各行のテキストに上線をつけます。

• line-through …… 各行のテキストの真ん中に線を引きます。

• blink …… テキストを点滅させます。

ブラウザは blink の指定は無視しても構わないことになっています。点滅の指定はちかちかして目が疲れるという理由で嫌われることが多いので、指定しない方が良いでしょう。

none 以外の値は重複指定可能です。たとえば、text-decoration: underline blink とすれば下線付きで点滅しますし、text-decoration: underline overline line-through とすれば上下中央にあわせて三本の線が引かれます。

このプロパティは継承しませんが、子要素にも効果が及びます。たとえば、

em{text-decoration: underline}
...

<h1><em>H<sub>2</sub></em>の核融合</h1>
<p><em>E = mc<sup>2</sup></em>という式は重要です。</p>

とあったとき、E = mc² や H₂ の部分には下線がつきますが、2 の部分だけ線が消えたり位置がずれたり色が変わったりするようなことはなく、単語全体に一本の線が引かれます。……そのハズなのですが、ブラウザがちゃんと実装できているかは保証の限りではありません。

text-shadow はテキストに陰影をつけます。陰影は位置、色、滲み(ぼかし？)によって表されます。

text-shadow プロパティには二つの長さの値が必須となっていますが、最初の値が右への位置、次の値が下へずらす位置となっています。これには負数も指定できます。たとえば、

H1{
 color: red;
 text-shadow: -0.5em 0.5em;
}

とすると、H1 は赤くなり、左下 0.5 em のところに赤い影がつきます。

さらにもう一つ長さの値を指定すると、これは滲みの範囲を指定したことになります。先程の例にひとつ値を追加して

H1{
 color: red;
 text-shadow: -0.5em 0.5em 0.5em;
}

とすると、左下の影はそのままですが、その周囲 0.5 em の範囲に、赤が滲んだような効果が現れます。実際にどのように滲み効果が出るのかは、ブラウザに依存します。

もちろん、影にテキストと違う色を付けることも出来ます。たとえば、

H1{
 color: red;
 text-shadow: -0.5em 0.5em 0.5em yellow;
}

とすると、影は黄色くなり、影の周囲に黄色が滲んだような効果が現れます。色の指定は長さ指定の前にあっても後ろにあっても構いません。もちろん #ff0 などの指定でも構いません。

さらに、"," で区切って複数の影を指定することも出来ます。たとえば、

H1{
 color: red;
 text-shadow:  0.5em  0.5em 0.5em yellow,
              -0.5em  0.5em 0.5em,
               0.5em -0.5em 0.5em green,
              -0.5em -0.5em 0.5em blue;
}

などとすると、周囲に黄、赤、緑、青の影が現れ、それぞれの周囲に滲み効果が出ます。後に指定された影は先の影を上書きしますので、黄色の上に赤、その上に緑、青となります。なお、影や滲み効果が元のテキストを塗りつぶしてしまうことはありませんので、青い影は元のテキストの上にまでは滲みません。

影が元のテキストを塗りつぶさないのを利用し、滲み効果を使って

H1{
 background: black;
 color: black;
 text-shadow: 0 0 0.5em yellow;
}

などとすると、黒地に黒抜きの文字がぼんやりと浮かび上がるような効果が得られます。しかしながらこれは、CSS2 に対応していないブラウザで text-shadow が無視されると、黒地に黒の文字となって読めなくなってしまいます。

letter-spacing は文字間隔を指定するプロパティです。

normal の指定はそのフォントの通常の文字間隔をそのまま使うことを意味します。長さの値を指定すると、その分だけ文字間隔が増加します。負の値も指定できますが、実装上の制限があるかも知れません。

また、letter-spacing に値を指定してある場合、text-align に justify を指定しても、letter-spacing の値以上に文字間隔が広がることがありません。letter-spacing: 0 の指定は letter-spacing: normal と同じ文字間隔になりますが、均等割付で文字間隔を広げることを禁止します。letter-spacing: normal の場合は、均等割付で文字間隔が広がり得ます。

letter-spacing と似ていますが、こちらは語と語の間隔を指定します。日本語の文書で使われることは殆どないでしょう。

指定方法は letter-spacing と殆ど同じです。normal の指定は通常の語間隔をそのまま使うことを意味し、長さの値を指定すると、その分だけ間隔が増加します。負の値も指定できますが、実装上の制限があるかも知れません。

text-transform はテキストの大文字小文字を変換します。

• none …… 変換しません。

• uppercase …… すべて大文字にします。

• lowercase …… すべて小文字にします。

• capitalize …… 最初の文字だけ大文字にします。

たとえば、

というようなマーク付けがしてあるとき、タグの表記を小文字にしたいと思ったら

span.tag{text-transform: lowercase;}

と指定すれば良いわけです。

white-space プロパティは、空白類文字の扱いを規定します。

• normal …… 通常の扱いです。空白類文字はあくまでデータ(語)の区切りとして扱われます。連続する空白類文字はひとつに纏められ、改行文字があっても改行はされません。インラインボックスがブロックの幅を超えるところで自動的に改行が行われます。

• pre …… 整形済みテキストとして扱います。空白類文字もデータとして扱われ、空白や改行はそのまま反映されます。

• nowrap …… 空白類文字の扱いは normal と同じですが、改行はいっさい行いません。

pre は、HTML の PRE 要素、nowrap は nowrap="nowrap" を指定した TD 要素の挙動に対応しています。むやみにこれらを指定すると、とんでもなく長い行が生成されて読みづらくなりますので注意すべきです。