講義18日目

講義内容

Dreamweaver CS5.5

「速習Webテクニック スタイルシート 上級レイアウト」を使ってサンプルレイアウト

速習Webテクニック スタイルシート 上級レイアウト (Quick Master of Web Technique)
速習Webテクニック スタイルシート 上級レイアウト
河内正紀 - 技術評論社

CSSの記述

vertical-align属性
一行に違う高さの文字が混在したしている時に、縦方向の位置をそろえる方法。通常は初期値のベースライン（baseline）に設定されている。このプロパティは、ブロックレベル要素（h1〜h6、ｐなど）では適用できず、インラインレベル要素（img、spanなど）とテーブルセルしか適用されない。 属性値

  • baseline:親要素にある文字のベースラインに合わせる（Xやzの文字の下のライン。従ってyなどの下部にあるディセンダは含まないライン）
  • top:親要素の列高さの最上部揃え（文字のline-heightを含む列の最上位）
  • bottom:親要素の列高さの最下部揃え（文字のline-heightを含む列の最下位）
  • middle:中央揃え（図形ならば中央、文字ならばｘなどの小文字の半分地点）
  • text-top:親要素の文字の最上部揃え（テーブルセルには無効）
  • text-bottom:親要素の文字の最下部揃え（テーブルセルには無効）

※図形を入れるimg要素はベースラインに揃えてあるため、図形の下側に文字のディセンダ部分の空白が開いてしまう。このような場合はvertical-align:bottom（または top）を指定してやると良い