Building a page template

2005年6月8日 著

以前「CSSによる見栄えの実装作業の可視化」というエントリで、Blogの画面をデザインする過程のレンダリング結果における変化を表示するGIFアニメーションを覚え書きしました。そのネタが割と好評（謎）だったのか、トラックバックはされませんでしたが、いくつかのはてなブックマークに登録されているのを見かけたりしました。それとはあまり関係は無いのですけど、より事細かにCSS実装のフローを解説しちゃうよっていう企画をみつけました（yuuさんがかつてWeb Site Design Vol.7にお書きになった素晴らしい記事「そろそろスタイルシートで」の「第二章 CSSでデザインしてみよう」とは別に）。
Max DesignによるBuilding a page template - a step by step tutorialというのがそれで、もともとは Blue Mountains College of TAFEの生徒さん向けに作られたプレゼン資料だそうです。例題とされているのは、Web Essentialsのサイト。Web Essentialsは、同名のカンファレンスイベントやCSSワークショップを開催している団体ですね。画面向かって左上にナビゲーション、右上には書き加えられたCSSソースが表示された状態で、追加されたスタイルとその反映結果が、細かく順を追って表示されます。
かなり昔、社内向けに似たような構成の勉強会を企画・開催したことはあったけど、追加したスタイルのソースとレンダリング結果を別々に示していた点でわかりにくい部分があったんですが、このように同じ画面上に表示するようにすると、若干理解し易い気がします。早速、次の勉強会（何時？）にはこの手法を取り入れようと思いました。どこまで細かくステップを分割するかという問題はあるけれど、いったん慣れてしまうと脳内で割とすっ飛ばしてしまう（＝初心者には理解の難しい）部分こそ解説が必要なステップだったりするわけで、悩ましいです。