CSSによる見栄えの実装作業の可視化

2005年4月30日 著

面白いGIFアニメーションをみつけました。MBoffin.comの「Designline - A Design Timeline」という記事で紹介されている、Designline for the Open Air blog templateというのがそれです。879KBもあるのですが、CSSやWeb標準とかに興味のある人なら、一見の価値はあると思います。Blogの画面をデザインする一連のワークフローを、ブラウザ上のレンダリング結果における変化として見せてくれているだけなんですが、僕は少なくともこういう動画を見たのはコレが初めてです。
CSSで見栄えを実装する大前提としては、文書のもつ意味構造に則したマークアップが必要となります。このアニメーションでは、実際にブラウザのデフォルトスタイルしか適用されていない状態でページ上に記載されるべき内容を書き並べ、ソースオーダー（文書上における記述順序）を確定してから制作者スタイルを適用し始めている様子が確認できます。「文書構造ありき」のデザインフローを可視化すると、大雑把にはこれと同様の流れになるのではないかな？という意味で、なかなか興味深いです。また、CSS実装の利点のひとつには、比較的ソースオーダーに対して柔軟に対応できるという点があります。table要素を用いたレイアウト実装では、ソースオーダーは一義的に決まってしまうのが常ですが、フルCSS実装の場合は（実現しようとしているレイアウトにもよりますが）そうとは限りません。そのあたりの差異もあわせて比較できたりすると、もっと面白いモノになるのかも。表現としてそれをどう盛り込むかは、難しそうですが。
とにかく、文書構造よりも視覚系ブラウザにおける「見栄えありき」でレイアウトやコーディングを捉えるという、かつてのレガシーな実装工程において主流であったワークフローしかご存じないような方には、特に是非見ていただきたいアニメです。DougやDaveの場合のDesignlineにつていは、僕も見てみたいですねぇ。