テーブルレイアウトをCSSレイアウトに自動変換

http://www.kisweb.ne.jp/personal/kouhai/ (4/28分)
http://deztec.jp/design/04/04/000256.html

MacromediaDreamWeaverには(確かDW4から)この機能があって、テーブルでレイアウトされたHTMLをボタン一発でCSSレイアウトに変換できる。でも簡単に予想がつくだろうけども、この機能を使ってCSSレイアウトに変換されたHTMLは見るも無残なことになる。というかもともとテーブルレイアウトのHTMLはほとんどが見るも無残なわけだから、何も変わりはしないと言ったほうがいいかもしんない。この機能はテーブルとかセルの絶対位置をdiv要素とCSSプロパティのpositionを使って置換してるだけ。つまり全ての見栄え(文字色とか)をCSSによって制御してるのではなくて、レイアウト(配置)だけをCSSで制御する形に変えている。

CSSレイアウトと言ったら、まず「正しいHTML」になってることが前提なので、この機能を使って「わーいテーブルじゃなくてCSSレイアウトになりましたー。やったね♪」とか無邪気に発言するとW3C原理主義者さんたちに白痴扱いされることは間違いなくて、荒廃の歌さんが望むような結果には残念ながら絶対にならない。つまりビタイチ使えない、無意味な機能。(この機能はテーブル⇔CSSという相互変換が行えるようになっており、実はCSS→テーブルという方向が主目的になっている。CSSレンダリングできないレガシーブラウザを念頭においているわけだ)

たとえば俺が数年前、HTMLのいろはも何も知らなかった頃にDreamWeaverにおんぶにだっこで作ったテーブルレイアウトのページ(本当は恥ずかしいから見せたくないのだけど)を、DWの機能を使ってCSSに変換するとこうなる。

テーブルレイアウト (→DWで変換→) CSSレイアウト

ブラウザで見る分には何の違いもないように見えるかもしれないけど、ソースを見ればどちらのHTMLも顔から火が出るほど恥ずかしいことになってるのがわかると思う。重要なのは、その意味がわかるかわからないかということであって、このソースを見て何がどうダメなのか全くわからないのであれば、テーブルだのCSSだの言う以前の問題だということになる。

だから徳保さんの言うとおり、正しく書かれていないテーブルレイアウトのHTMLは正しいCSSレイアウトのHTMLに自動では絶対変換出来ないし、HTMLを正しく使う気がないのであればCSSを無理して使う必要はないし、無理して使うと(上のソースのように)ますますアホっぽく見えるからやめといた方がいいよ、と思う。テーブルレイアウトは正しくないHTMLの代表選手に挙げられているだけであって、そこだけ変えても何の意味もないということ。

あとこれだけ言っておいてアレなのだけど俺は全然W3C原理主義者とかじゃなくて、冷麺でテーブルレイアウトをやめてStrictなHTML(XHTML 1.0)を書き始めた理由はただ単に点取りゲームとしてHTML-lintで100点が取りたかっただけ。厳密に言うとアレで100点取ったからといってそれが即ち正しいHTMLであるかというと全然そうではないのだけど、少なくとも幾分マシなHTMLが書けるようにはなった。いまだに思想的には「テーブルレイアウトでも別にいいじゃん」って思ってる。

あとちょっと話がズレますけども、ARTIFACTさんも趣味のWebデザインさんもいちご帝国さんも迎賓館裏口さんも我が冷麺もみんなMovableTypeを使ってるのだけど、どいつもこいつもデザイン、機能、ともにMovableTypeっぽくなくて(特に迎賓館裏口さん)、「理想的なデザインと機能」がほとんどMTというツールとは無関係だということがよくわかる。そういうMTの懐の深さが理想的なんだと思った。

そしてこの記事は激しく模倣犯向きじゃないということに今気付いてすいません。