位置調整と段落の書式設定
テキストのブロックや段落のために、特に段落用の属性があります。段落は例えば左揃えや右揃えにして配置することができます。
算出された高さや定義された高さというものがあり、純粋なテキストの大きさより場所を取る表のセルや他の要素などでは、よく縦の位置調整に上揃え、中央揃え、下揃えなどといったことが必要になって来ます。
段落の書式設定の典型的な属性の1つにインデントと行の高さがあります。流れるテキストを段落の中でどんな風に改行するにも選択肢があります。全く改行無し、自動改行、あるいは文章編集の時に決めた位置で行うなどと指定することができます。
- 位置調整と段落の書式設定に関する一般的なコメント
- text-indent（テキストのインデント)
- line-height (行の高さ)
- vertical-align (テキストの行揃え、縦方向)
- text-align (テキストの行揃え、横方向)
- white-space 言葉（単語）間
text-indent (テキストのインデント)
text-indentとは、文章の最初の行のインデントを指定するためのプロパティです。インデントの量は、実数値に単位を付けて指定します。マイナス を指定することもできます。初期値は0で、インデントしないよう指定されています。
| 書式 | text-indent: <value:値> |
|---|---|
| 取り得る値 | <length> |<percentage> |
| 初期値 | 0 |
| 適用される | ブロック−レベル要素 |
| 継承性 | 可 |
text-indentプロパティをブロック−レベル要素（ P・ H1など）に適用することができ、要素の最初の行が受けるべき字下げの数を定義します。その値はlengthかpercentageでなければなりません；パーセンテージは親要素の幅を参照します。text-indentの普通の使い方は、段落の字下げです：
text-indentプロパティをブロック−レベル要素（ P・ H1など）に適用することができ、要素の最初の行が受けるべき字下げの数を定義します。
その値はlengthか percentageでなければなりませんパーセンテージは親要素の幅を参照します。
text-indentの普通の使い方は、段落の字下げです
</p>
line-height (行の高さ)
line-heightとは、行の高さを指定するためのプロパティです。初期値はnormalであり、ブラウザが自動的に適切な高さを設定します。値には実数値、もしくは実数値に単位をつけて指定します。単位をつけない場合には、フォントの大きさにその数値をかけたものが行の高さになります。
| 書式 | line-height: <value:値> |
|---|---|
| 値 | normal | <number> |<length> |<percentage> |
| 初期値 | normal |
| 適用要素 | 全ての要素 |
| 継承性 | 可能 |
line-heightプロパティーは、テキストの基準線との間の空間（隙間）を制御する値を受け入れます。その値は数値の場合行の高さは要素の文字サイズに数値掛けて計算されます。パーセント値は要素の文字サイズに対する相対的なものです。マイナス値は許されません。行の高さは、fontプロパティー内で文字サイズにそって与えられることもできます。
line-heightプロパティーはダブル・スペース・テキストに使うこともできます：
style="line-height:10.5pt;font-size:9pt;
margin-left:20%;
margin-right:20%">
line-heightプロパティーは、テキストの基準線との間の空間（隙間）を制御する値を受け入れます。
その値は数値の場合行の高さは要素の文字サイズに数値掛けて計算されます。
パーセント値は要素の文字サイズに対する相対的なものです。
マイナス値は許されません。
行の高さは、 fontプロパティー内で文字サイズにそって与えられることもできます。
line-heightプロパティーはダブル・スペース・テキストに使うこともできます</p>
vertical-align (テキストの行揃え、縦方向)
vertical-alignとは、要素の縦方向の位置を指定するためのプロパティです。初期値はbaselineであり、指定したボックスとその親ボックスのベースラインを揃えます。テーブルセルにbaselineを適用したときは、各セルの最初の行のベースラインを揃えます。ほかにtop、middle、bottom、text-top、text-bottom、super、subなどのキーワードで、あるいはベースラインが揃った状態からの移動量を実数値に単位を付けて位置を指定することができます。
| 書式 | vertical-align: <value:値> |
|---|---|
| 値 | baseline |sub
|super |top
|text-top |middle
|bottom | text-bottom |<percentage> |
| 初期値 | baseline |
| 適用要素 | インライン要素 |
| 継承性 | 無し |
vertical-alignプロパティーはインライン要素の垂直方向配置を、親要素または要素の行に相対的に、変えるのに使われます。（インライン要素はその前後に強制改行がないもので、例えばHTMLの EM・ AそしてIMGです。）値は、要素のline-heightプロパティーに相対的なpercentageで、親基準線の上に特定されたものに要素の基準線を持ち上げます。マイナス値も許されます。値はキーワードのこともありえます。
以下のキーワードは親要素に相対的な位置に影響を及ぼします：
- baseline（要素と親の基準線の配置）
- middle（基準線プラスx-heightの半分−−親のletter "x"の高さ）
- sub（下付添え字）
- super（上付添え字）
- text-top（要素と親文字の先端配置）
- text-bottom（要素と親文字の底辺配置）
要素の行に相対的な位置に影響を及ぼすキーワードは以下のものがあります。
- top（行中最も高い要素をもった要素の先端配置）
- bottom（行中最も低い要素をもった要素の底辺配置）
vertical-alignプロパティーは画像配置用に特に有用です。
以下のような例です：
<head>
<title>vertical-align</title>
<style type="text/css">
.oben { vertical-align: top; background-color:#CCCCCC; }
.mittig { vertical-align: middle; background-color:#DDDDDD; }
.unten { vertical-align: bottom; background-color:#EEEEEE; }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table border="1"><tr>
<td height="200" class="oben"><b>Text oben</b></td>
<td height="200" class="mittig"><b>Text mittig</b></td>
<td height="200" class="unten"><b>Text unten</b></td>
</tr></table>
</body>
</html>
text-align (テキストの行揃え、横方向)
text-alignとは、行揃えを指定するためのプロパティです。値には、左寄せにするleft、右寄せにするright、中央寄せにするcenter、行の両端を揃えるjustifyが指定できます。また、th要素およびtd要素に対しては、縦方向で揃えたい文字列を指定することができます。
| 書式 | text-align: <value:値> |
|---|---|
| 値 | left | right | center | justify |
| 初期値 | ブラウザによって決められる |
| 適用要素 | ブロック−レベル要素 |
| 継承性 | 可能 |
text-alignプロパティーはブロック−レベル要素（P・H1など）に適用され、要素のテキストの配置を与えます。このプロパティーは機能的にはHTMLの段落・見出し・ブロック区域の ALIGNと同じです。
white-space
word-spacingとは、単語同士の間隔を指定するためのプロパティです。実数値に単位を付けて指定します。初期値はnormalであり、標準的な間隔が設定されます。
| 書式 | word-spacing: <value:値> |
|---|---|
| 値 | normal |<length> |
| 初期値 | normal |
| 適用要素 | 全ての要素 |
| 継承性 | 可能 |
word-spacingプロパティーは言葉（単語）間の追加空間を定義します。この値はlength形式にすべきです；マイナス値は許されます。
<head>
<title>white-space</title>
<style type="text/css">
#editor { white-space:pre; }
#langezeile { white-space:nowrap; }
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p id="editor"> word-spacingプロパティーは言葉（単語）間の追加空間を定義します。
この値はlength形式にすべきです；マイナス値は許されます。
</p>
<p id="langezeile"> 例を以下にあげます：</p>
</body></html>
目的別属性
広告
