vertical-align

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

vertical-alignプロパティの役割

vertical-alignプロパティは、行における縦方向の位置を指定します。

値	インライン要素	セル要素
baseline	指定した要素のベースラインに揃える。	ベースラインを最初の行のベースラインに揃える。
bottom	指定した要素の下辺に揃える。	セルの下線を最初の行の下線に揃える。
middle	指定した要素のベースラインから親要素のフォントの大きさの小文字のxの高さの上半分の位置に揃える。	セルの中心線を最初の行の中心線に揃える。
sub	指定した要素のベースラインを親要素の下付き文字の位置に揃える。	baselineが適用される。
super	指定した要素のベースラインを親要素の上付き文字の位置に揃える。	baselineが適用される。
text-bottom	指定した要素の下辺を親要素のフォントの下辺に揃える。	baselineが適用される。
text-top	指定した要素の上辺を親要素のフォントの上辺に揃える。	baselineが適用される。
top	指定した要素の上辺を行中の最も高い要素の上辺に揃える。	セルの上線を最初の行の上線に揃える。

インライン要素とセル要素で、値の解釈が変わります。

<table>
<tr>
<td style="vertical-align:bottom"><img src="../../../data/img/global/logo.jpg" />
テキストの位置が下になる</td>
</tr></table>

テキストの位置が下になる

上のサンプルでは、vertical-alignプロパティをtd要素に設定しました。

UpDate:2010-10-21

〔Amazonの書籍紹介ページを開きます〕

実践的内容のCSS＋XHTMLの解説書。よくわからずにCSSを使っていた、というような初心者にとくにお奨めです。若干雑なつくりが気になりますが、ウェブ制作者のノウハウも知ることができます。

内容が正確で説明が丁寧なXHTMLとCSSの解説書。異なるブラウザ間での互換性の保持やアクセシビリティを考慮したつくりにも触れています。ボリュームがあり辞典的な使い方ができます。

HTML文書をつくる上で辞典の存在は欠かせません。ウェブ上で調べればいいと思う人もいるかもしれませんが、やはり傍らにおいてすぐに調べられるようにしておくと作業は早くなります。中級者向け。

ウェブデザイン、ウェブサイト作成の初心者～中級者向けの本。丁寧なつくりでHTMLの要素、CSSのプロパティ解説ページにおいても関連ページの表記を細かく行っています。

CSS、Flash、XHTML、Ajax等、ウェブデザインの全容を確認・勉強できる、ウェブデザイン初心者のための本。実際のコーディングに関しての説明は少なく、HTMLなどの知識は別途勉強する必要があります。

実際に一つのウェブサイトをつくる過程を経験しながらHTMLやCSSを理解していくスタイルをとっている本。初心者向けで非常にわかりやすい構成です。

中級者以降向け。独学でDreamweaver を使ってきた人など、実は便利な機能があることや正しい使い方を知らない、という人に向いています。本書はCS3を想定してかかれていますが、それ以外のバージョンであっても読むことはできます。

ウェブサイトの制作に沿った形で参照できるDreamweaver の解説本。逆引きリファレンスのような感覚で、知りたい箇所から読んで理解することができる、非常に分かりやすい本。初心者～中級者向け。

ウェブ制作の必携ツール・・・といったら大袈裟かもしれませんが、HTMLとCSSを一通り覚えたら、Dreamweaver を使って制作した方が圧倒的に楽になります。バージョンアップするごとに確実に使い勝手は向上しています。