これまでの HTML でも右寄せ・左寄せ・センタリングといった文書の整形ができたわけだが,CSS ではさらに行間やインデントといった詳細な書式にもはたらきかけることができる。
まずは基本的な“右寄せ・左寄せ・センタリング”について。
text-align: (キーワード);
この属性が適用されるのは <P>,<DIV>,<BLOCKQUOTE> といったブロック要素のみで,<EM>,<SPAN>,<Q> などのインライン要素については適用されない(ブロック要素・インライン要素については Section 4 を参考にされたい)。
キーワードは,以下から 1 つを指定する。
justify については,ブラウザがサポートしていない場合があり,その場合はブラウザに対処がゆだねられる。
<P STYLE="text-align: center;">The text of this paragraph is centered.</P>
<P STYLE="text-align: justify;">The value of text-align property of this paragraph is "justify," but some browsers do not support it.</P>
The text of this paragraph is centered.
The value of text-align property of this paragraph is "justify," but some browsers do not support it.
IE3, NN4 justify はサポートされていない。
文章を書くときに,段落の 1 行めを字下げする。このような“字下げ”をインデントという。CSS ではインデントはブロック要素の 1 行めに適用される。
text-indent: (長さ);
この(長さ)で与えられた分だけ,要素の 1 行めが先頭から字下げされる。
(長さ)は Section 3 で紹介したようにポイントを使う方法もあるが,text-indent 属性を指定する要素のフォントサイズを基準にする方法もある。このとき使われる単位にはエムと呼ばれるものがあり,記号は em である。
CSS においてエムで表される長さは“文字の高さ(フォントサイズ)”になる。仮にフォントサイズが 12pt であるとき,1em=12pt である。
このとき“文字の幅”と言わないのはアルファベットの“i”と“w”のように幅が異なるものがあるからである:プロポーショナル。
簡単な例を示しておこう。
<P STYLE="text-indent: 20pt;">20pt のインデントが指定してある段落です。先頭行が 20pt 字下げされます。</P>
<P STYLE="text-indent: 1em;">この段落のインデントは 1em です。ブラウザのフォントサイズの設定を変えて違いを確かめてください。</P>
20pt のインデントが指定してある段落です。先頭行が 20pt 字下げされます。
この段落のインデントは 1em です。ブラウザのフォントサイズの設定を変えて違いを確かめてください。
似た単位にエックスハイト(記号:ex)があることにも触れておこう。ex は文字“x”の高さを基準とする単位である。em と同様,そのときのフォントサイズによって実際の物理的な長さは異なってくる。また,同じフォントサイズでも,フォントの種類によって 1ex の長さが変わってくることがある。
text-indent 属性の値には負の値をとることもできる。この場合,1 行めが飛び出した形で整形される。