vertical-align と恥の文化

CSSvertical-align というプロパティがございまして、僕は昔これについてえらい勘違いをぶっこいていたのですが Eric Meyer 兄さんによってその過ちを正された時、普段から「まず調べる!」などと抜かしている建前恥ずかしくて自分だけの秘密にしておりました。ところが今日会社の後輩であり HTML・CSS マニヤ の植Dくんもまた同じような過ちを繰り返していることに気づき、ここにその思い出を書き残します。

vertical-align にまつわる注意

CSS に慣れていて、でもいままでちゃんと vertical-align と向き合ってこなかったあなたなら、CSS の W3C Recommendation を見ただけで「あっ」と声を上げてしまうと思うのですが、以下のようなところで注意しないと恥ずかしいことに!

  • vertical-align は inherit しない。
  • vertical-align は "inline elements" か "table cell" に適用される。

以上!。つまりどういうことかというと、

<p style="vertical-align:middle;">
<img src="http://cafemomo.adam.ne.jp/images/unko.gif" alt="unkoアイコン">うんこー
</p>

だとおそらく思ったのと違う感じになります。だって inherit しなくて "inline element" に適用ってことはよおー、 p に付けても全く意味無し!。無視される始末。

<p>
<img src="unko.gif" alt="unkoアイコン" style="vertical-align:middle;">うんこー
</p>

こう使うわけですね。
ちなみに値の middle とか baseline とか bottom とか使うときは、「何に対して(何のエレメントのどこの点を基準に)」「自分の何を(スタイル付けしたエレメントのどこの点を)」位置づける設定なのか。というところに気を付けてまいります。例えばデフォルトの baseline だと、

スタイル付けしたエレメントbaseline親エレメントbaseline に合わす

です。画像や、フォーム要素などの「後で置き換わります要素」の場合は文字と違って baselinebottom は一緒くたですが、親エレメントの baseline というのはしっかりばっちり文字っぽく処理されてきますので注意してまいりたいと思います。これが昔みんなをびっくりさせた、テーブルのセルの中に画像を置いたら画像の下に変な隙間が出来たな…。なんだろうなこれな…。という問題の原因であります。

親エレメントであるtdbaselineに、画像の底辺を合わせたもんだから、baselineより下の分( g とか j のヒゲの部分が食い込む部分です)だけ空いちゃった。というあれ。

でもって値の基準は、適用したエレメントが "inline elements" なのか "table cell" なのかでも変わります。要注意してまいります!。他にもごちゃごちゃラインボックスの高さがどーたらとかmiddleで合わせたときの基準は親エレメントのbaselineから 0.5ex上だとか色々あるんですがとりあえず無視!。がんばっていこう!。でもさ、baselineだのなんだの言われてもさ、日本語関係ないじゃないですか!。たまらん。

補足

会社に早速マニヤの植Dさんとvertical-align問題について語り明かしたところ、我々の誤解は、より馴染みの深いtext-alignプロパティとの違いによるところが大きいということがわかりました。そもそもtext-alignは、

  • text-alignは inherit する
  • text-alignは "block element" に適用される。

つまりpdivに付けて使います。この使い方をそのままvertical-alignに当てはめようとするのが困惑の始まりとなるわけですね。詳しいことは置いといて、気持ちの問題で考えると…、

  • text-alignは、自分の子供に対して「どっちかに寄れ!」と命令する雰囲気
  • vertical-alignは、親に合わせて「自分自身を寄せる」ような佇まい

ということですね!。ただし "table cell" に対してvertical-alignを適用すると、とたんにtext-align的な臭いを漂わせます。うむ!。もう帰りたい!