CSSで代替できないHTML

Movable Type のサンプルテンプレートは完全にデザイン系はCSSに分離されてるんで、この際だから自作のテンプレートもデザインを完全にCSSに分離することにした。

特に、今まではtableタグでやってた配置をmarginやらpaddingでやるのが、根本的考えの違いからかなり手こずった。んで、結局、CSSに移行できないところが少しだけ残っちゃった。

まず、ブロック要素を中央揃えにする方法が判らない。HTMLなら<div align="center">で括るだけだけど、text-align: center は文字通りテキストにしか有効にならない……。vertical-align同様、horizontal-alignを用意してくれ!

んで、こっちは完全にお手上げの <td nowrap="nowrap">に代わるCSS。まったく見当もつかない。

そして最後は、floatを使ったボックス関連。このボックス自体は内部コンテンツにあわせて高さを変えるんだけど、その親のボックスは変わらない。なもんで、親から子供があふれちゃう。まぁ、子供はいつか親を抜くもんだけど、親も子供の成長にあわせて成長していってほしいというのがボクの些細な意見でして。しょうがないから、親のボックスに overflow: scroll 付けてみたんだけど、今度はあふれないときもスクロールバーが。ぎゃふん。

というわけで、朝までリファレンスとにらめっこを楽しめて、トップページもおおむね満足のできに。しかし、トップ以外はまったく変更していないのに、CSSだけは同じのを参照してるからとんでもないことに(笑)。ま、近々こっちもやります。

コメントを残す