XHTML/CSS・トップ | CSSプロパティ・目次

●テキストを上下にずらす

 vertical-alignはインライン要素とテーブルのセル内容の位置を上下にずらすプロパティです。指定できる値はbaseline、bottom、middle、sub、super、text-top、text-bottom、topおよび、単位付きの長さとパーセンテージ(〜%)です。子要素に継承しません。また、インライン要素に対して、vertical-alignプロパティが対応しているブラウザはウィンドウズ版IE5.5以降、Netscape6.0以降、Opera6.0以降、および、Firefox、Safariです。(対応しているバージョンでもブラウザで確認することを推奨します。)

【種類】

vertical-alignプロパティの値の種類
説明
baseline ベースライン上に揃える(デフォルト)
bottom 要素の下辺に合わせる
middle 要素のほぼ中心
sub 下付き文字
super 上付き文字
text-top ボックスの上とフォントの上を揃える
text-bottom ボックスの下とフォントの下を揃える
top 行の上辺と要素の上辺を合わせる
単位付きの長さ 指定した長さだけ上に上げる。マイナス指定も可。
パーセンテージ(〜%) 〜%指定×line-height指定の分だけ上に上げる。マイナス指定も可。

【サンプル】

 baseline baseline

 sub sub

 super super

 単位付き長さ 単位付き長さ

 〜% 〜%

【CSS】

.mars1 {
 vertical-align: baseline;
}
.mars2 {
 vertical-align: sub;
}
.mars3 {
 vertical-align: super;
}
.mars4 {
 vertical-align: -20px;
}
.mars5 {
 vertical-align: -20%;
}

【HTML】

<h2>baseline <span class="mars1">baseline</span></h2>
<h2>sub <span class="mars2">sub</span></h2>
<h2>super <span class="mars3">super</span></h2>
<h2>単位付き長さ <span class="mars4">単位付き長さ</span></h2>
<h2>〜% <span class="mars5">〜%</span></h2>

■解説

 左側が標準のテキストで右側がvertical-alignプロパティの値で指定したテキストです。ここでは解説の都合上、span要素を使っていますが、本来、目的のセレクタまたは要素に指定します。

【例:】

<p class="mars1">baseline</p>

※ mars はクラス名で作者が任意の名前を付けます。どのようなスタイルを(CSSで)指定するかは作者が勘案します。ここでは 「ピリオド + 任意のクラス名」 のクラスセレクタの形で説明していますが、ID名およびIDセレクタも使えます。

XHTML/CSS・目次 | テキスト・目次

Copyright (C) 2006-2007 http://www.xml.vc/