Section 3 : 垂直配置

 行中に画像などが入った場合,テキストの流れとその位置関係を問題にしたい場合がある。また,上付きのような文字が一直線に並ばないような配置もあるだろう。

垂直配置:vertical-align 属性

 水平配置を text-align 属性によって指定するのに対して,垂直配置は vertical-align 属性で指定する。この属性はインライン要素に適用され,継承されない

vertical-align: (キーワード または パーセンテージ);

 値をキーワードとする場合には,候補として次のものがある。

baseline
その外の要素のベースラインに合わせて整形する。ベースラインを持たない場合はいちばん下を基準とする。初期値。
text-top
この値が指定された要素のいちばん上をその外の要素の文字のいちばん上に合わせて整形する。
text-bottom
text-top とは逆に,その要素のいちばん下をその外の要素の文字のいちばん下に合わせて整形する。
middile
その要素の縦方向の中央点を,その外の要素のベースラインから 0.5ex 上の点に合わせて整形する。
super
上付きにする。
sub
下付きにする。
top
その要素でもっとも上にあるものに上端を合わせる。
bottom
その要素でもっとも下にあるものに下端を合わせる。
ベースラインについて。
図 3.1 [D]

 ベースラインとは右の図に示すように欧文を配置するときの基準になるものである。和文にはベースラインはないが,欧文と混在した場合,和文文字の最下部が欧文文字の最下部に合わせられる場合と,ベースラインに合わせられる場合がある。

 値が topbottom のときに関してはその要素の中だけで整形が行われるのに対し,それ以外では,その外側の要素と比較して整形されるという点に注意しよう。

 パーセンテージで指定するときは,100% とするのはその要素の line-height である。指定された分だけ,その要素のベースラインをその外側のベースラインに対して持ち上げる。50% を指定すればベースライン上方向に 0.5 行分持ち上がるであろう。負の値も許され,-100% では 1 行分ベースラインが下げられて整形されることになる。ベースラインがない場合は,“いちばん下”と読み替える。

<P>ベースライン(最下部)を <SPAN STYLE="vertical-align: 50%;">0.5 行分持ち上げます</SPAN>。文字を大きくして<BIG STYLE="vertical-align: middle;">真ん中をそろえて</BIG>整形します。</P>

ベースライン(最下部)を 0.5 行分持ち上げます。文字を大きくして真ん中をそろえて整形します。

 IE4/5  supersub のみがサポートされている。

 IE3, NN4  vertical-align 属性はサポートされていない。

行送りとラインボックス

 line-height 属性は“行送り(行の高さ)”を指定すると述べたが,厳密には正しくない。行送りは,line-height,vertical-align,そして要素の大きさを加味して作られるラインボックスによって決められる。

 たとえば,14pt の font-size に対して line-height を 18pt としたならば,上下に 2pt ずつが“行間”として割り振られる。ところが,その行に 18pt 以上の高さの画像が入っていると行どうしが重なってしまうかというと,そうではない。これは,ラインボックスの高さが line-height で指定されたものより大きいからである。

 ラインボックスの高さは,次のようにして決められる。

  1. font-size と line-height を比較して,line-height のほうが大きければ,文字の上下にその値に達するまで均等に空白がとられる。逆の場合は,負の空白を挿入し,あたかも line-height の値になったかのようにする。
  2. vertical-align によって垂直方向の配置を決め,もっとも上にあるものの上端からもっともしたにあるものの下端までをラインボックスの高さとする。このとき,line-height によって作られた空白も要素の一部とする。
  3. もし,ラインボックスの高さが小さいと,行どうしが重なることもある。
ラインボックスの模式図。
図 3.2 [D]

 もし,背の高い画像が含まれていたら,そのボックスの大きさに応じてラインボックスの高さが大きくなることがある。

 また,行中で vertical-align がさまざまに指定されたときもラインボックスは高くなりうる。たとえば,行の一部に vertical-align を -100% とする指定があった場合,ラインボックスは line-height の倍になるだろう。

 line-height を長さまたはパーセンテージで指定して,font-size を大きくすると,line-height はそのままの値が継承されるから,font-size のほうが line-height より大きくなることもある。その結果,思いがけず行が重なる場合がある。line-height が倍率で指定されていれば,継承されるのは倍率そのもなので,font-size に応じて変わりうるから,1.0 以上を指定していれば重なることはない。

 NN4  ひとたび line-height が指定されると,その要素では画像などのボックスによってラインボックスの高さは書き換えられない。したがって,line-height 属性を指定した要素に背の高い画像を貼り込むと,画像とテキストが重なる。