初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL8. テキスト表示に関する設定　その3 ★ 行揃え（水平位置）、インデント、垂直位置

１．行揃え（水平位置）

text-align: <値>;

<値>に「left、center、right」のいずれかを指定することによって、その行を画面上で左寄せ、中央、右寄せのうち、どの位置に表示させるかを指定します。

text-align: left;

text-align: center;

text-align: right;

２．インデント

text-indent: <値>;

インデントとは行頭の字下げのことで、以下の2通りの指定方法があります。

�@）「数値+単位」で指定する

（スタイルシートで使用できる単位については、「Column7.スタイルシートと単位」を参照して下さい。）

ex. text-indent: 1em;

�A）「%」で指定する

親要素の内容領域に対する割合で、字下げの幅を指定します。ただし、ブラウザや親要素によっては、内容領域に「width:」が設定されていなければ画面の表示幅に合わせてインデントが変化し、設定されていれば常に全画面幅に対するパーセンテージでインデントが保たれる場合があります。表示に影響すると思いますので、「%」で指定する時はこの点に留意して下さい。

ex. text-indent: 5%;

３．垂直位置

vertical-align: <値>;

一行中の文字の一部を上付きや下付きにしたり、画像などのインラインレベル要素を文字と並べて表示する時にその縦方向の相関的な位置を指定します。また、テーブルのセル内で、内容を上下間のどの位置に表示するかを指定することもできます。<値>は一般に以下の6つのキーワードで指定しますが、Netscape6.2以降では「数値+単位」や「%」で指定することも可能です。ただし、これはIEでは正しく反映されません。（インライン要素については、「Column11.インライン要素とブロックレベル要素」を参照して下さい。）

top ... 上に揃える

middle ... 中心を揃える

baseline ... その行のベースラインに揃える（デフォルト）

super ...

sub ...

以上の他に、「bottom」も指定可能ですが、表示は「baseline」と同じです。ただし、IEでは<p>などのインラインレベル要素には「baseline」を、下の図のようにセル内容には「bottom」を指定しなければ反映されません。なお、テーブルのセル内容に上記のキーワードを指定した時は、それぞれ下の図のように反映されます。

初級篇2.VOL8. テキスト表示に関する設定・その2 <<

>> 初級篇2.VOL8. テキスト表示に関する設定・その4