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

1.8 テキストの整形

 テキストの整形に関わるプロパティは,簡単で実際的なものが多い。ここでは,これらのうちいくつかを解説する。

行配置:text-align プロパティ

 テキストの整形において代表的なのは,左寄せ,右寄せおよびセンタリングといった行配置である。これは,text-align プロパティで指定される。

text-align: キーワード;

このプロパティは,

  • 前後に改行を伴う要素(ブロック要素)に適用される。
  • 初期値は,ブラウザおよびテキストの流れる方向に依存する(日本語を書いている限り,初期値は left とみて差し支えなかろう)。
  • その要素で text-align プロパティを指定しなかった場合,それまで(親要素)と同じ行揃えになる。

ここに,“前後に改行を伴う要素”とは,多くの HTML ブラウザのデフォルトの状態で,PHnDIVBLOCKQUOTEADDRESS などの要素である。1.2 で述べたように,適用されるかという問題なので,これ以外の要素に指定するのも構わない。

 キーワードは,次の中からひとつを与える。

left
左揃え。
right
右揃え。
center
センタリング。
justify
両端揃え。適切な調整がなされて,行の両端が揃えられる。ブラウザは,この値をサポートしない場合もある。

 このプロパティを用いれば,たとえば“見出しはつねにセンタリング”というようなことが簡単に実現できる。

H1 { text-align: center; }
P { text-align: justify; }

<H1>禁則処理</H1>
<P> ワードプロセシングにおいて,禁則処理はたいへん重要である。行頭(閉じかっこ,句読点など)および行末(開きかっこ)に特定の文字が来ないように,文字間隔を適切に調整して,行の折り返し位置を定めている。</P>
<P> 折り返し位置の決定は,禁則に対して点数をつけ,それがもっとも小さくなるように行う方法が多い。</P>

禁則処理

 ワードプロセシングにおいて,禁則処理はたいへん重要である。行頭(閉じかっこ,句読点など)および行末(開きかっこ)に特定の文字が来ないように,文字間隔を適切に調整して,行の折り返し位置を定めている。

 折り返し位置の決定は,禁則に対して点数をつけ,それがもっとも小さくなるように行う方法が多い。

インデント幅:text-indent プロパティ

 ここでのインデントとは,たとえば,パラグラフの 1 行めの“字下げ”である。このインデント幅を指定するのが text-indent プロパティである。指定方法は,次のいずれかである。

text-indent: 長さ;
text-indent: 百分率;

このプロパティは,

  • 前後に改行を伴う要素(ブロック要素)に適用される。
  • 初期値は 0 である。
  • その要素で text-indent プロパティを指定しなかった場合,それまで(親要素)と同じインデント幅になる。
インデント幅。

 長さで指定する場合は(単位をつけることに注意),その値がそのままインデント幅になる。百分率で指定する場合は,100% とするのはその要素がいっぱいに表示できうる幅である。

 長さおよび百分率で指定する場合いずれも,負の値を与えることができる。このときは,1行めが飛び出して整形される。

 注意すべきなのは,BR 要素は“改行を作る要素”であって“前後に改行を伴った(ひとまとまりの)要素”ではないから,BR の直後にインデントは効かないということである。

 text-indent プロパティの例をご覧いただこう。

P { text-indent: 5%; }

<P>情報理論における“エントロピー”は情報源の平均情報量であり,その情報源のあいまいさを表す。また,情報源の出力する系列のうち代表的なものの個数を与えるものとも解釈できる。</P>

情報理論における“エントロピー”は情報源の平均情報量であり,その情報源のあいまいさを表す。また,情報源の出力する系列のうち代表的なものの個数を与えるものとも解釈できる。

上と同じ HTML で,次のような負のインデントを与えてみる。

P { text-indent: -1em; }

情報理論における“エントロピー”は情報源の平均情報量であり,その情報源のあいまいさを表す。また,情報源の出力する系列のうち代表的なものの個数を与えるものとも解釈できる。

 “その要素がいっぱいに表示できうる幅”では厳密には正しくない。正確には“その要素の収容ブロックの幅”である。詳しくは,ボックスの部分で述べる。

IE4
text-indent プロパティに対する百分率指定は,その要素が表示されるときにとられる幅を 100% としてしまっている。
IE5, 5.5
text-indent プロパティに対する百分率指定は,その要素が表示されるときにとられる幅を 100% としてしまっている。また,width プロパティとの組み合わせで出力が乱れる場合がある。