<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">

		<div id="説明">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">vertical-align</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">6</span> IE <span class="emphasis">4</span> CSS <span class="emphasis">1</span></td>
				</tr>
				<tr>
					<td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">継承 : なし</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>この属性には 2 組の値があり、適用するインライン要素の文字に異なる設定を行います。この設定で重要なのは、インライン要素がコンテンツを保持する独自のラインボックスを持つことです。<span class="literal">top</span> と <span class="literal">bottom</span> の 2 つの値はラインボックスでのテキストの表示方法に影響します。この 2 つを設定するとボックスのその設定に対応して上または下にテキストフラッシュが表示されます。
</p><p>この属性の適用はテキストのインラインの幅だけではありません。イメージとテーブルにもこの属性が使用できます。<span class="literal">vertical-align</span> のその他すべての設定は、要素の領域全体が親要素のテキストコンテンツに対する縦方向の配置方法に影響します。既定値の <span class="literal">baseline</span> にすると、ラインボックスのテキスト (または <span class="literal">img</span> などの要素の一番下) と親テキストの両方のベースラインが水平になるようにラインボックスを配置します。このように <span class="literal">em</span> 要素は独自のラインボックス要素になることができますが、<span class="literal">p</span> 要素を持つので同じベースライン上にあるように見えます。その他の属性の定数値 (およびパーセント値または長さ) は要素のラインボックスが親のラインを元に設定されるかどうかを決定します。正のパーセント値または長さの値を指定すると、要素はベースラインから指定した距離だけ上に配置されます。負の値を指定すると、要素はベースラインの下に配置されます。パーセント値は、ラインの高さを基準に計算します。
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="csssyntax"><span class="title">CSS 構文</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>vertical-align: <span class="replaceable">vertAlignType</span> | <span class="replaceable">length</span> | <span class="replaceable">percentage</span></pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="value"><span class="title">値</span></td>
				</tr>
				<tr>
					<td><p>次の 2 つの定数値が要素自体のテキストの整列に適用されます : <span class="literal">bottom</span> | <span class="literal">top</span>。
</p><p>周辺の親要素のテキストラインに対して、<span class="literal">baseline</span>、<span class="literal">middle</span>、<span class="literal">sub</span>、<span class="literal">super</span>、<span class="literal">text-bottom</span>、および <span class="literal">text-top</span> の 6 つの定数値が要素のラインボックスの配置に適用されます。<span class="literal">baseline</span> に設定すると要素のベースラインと親要素ラインを揃えます。<span class="literal">middle</span> に設定すると要素の縦方向の中心点をベースラインに親要素のフォントの x-height の半分を足したものに揃えます。<span class="literal">sub</span> と <span class="literal">super</span> に設定すると、要素の下付き文字の位置と上付き文字の位置を変えますが、それ自体では真の下付き文字や上付き文字を作成しません。そのため、この属性ではフォントサイズは調節されません。<span class="literal">text-bottom</span> に設定すると、要素の一番下を親要素テキストのフォントラインの一番下に揃えます。<span class="literal">text-top</span> に設定すると同様に要素と親の一番上を揃えます。
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="initvalue"><span class="title">既定値</span></td>
				</tr>
				<tr>
					<td><p><span class="literal">baseline</span></p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="example"><span class="title">例</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>span.sup {vertical-align: super; text-size: smaller}</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="appliesto"><span class="title">適用先</span></td>
				</tr>
				<tr>
					<td><p>インライン要素のみ</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="objectmodelreference"><span class="title">オブジェクト参照</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>[window.]document.getElementById("<span class="replaceable">elementID</span>").style.verticalAlign</pre>
						</span></td>
				</tr>
			</table>
		</div>
</body>
</html>