CSS Programming HTML5 Template Generator

この記事は CSS Programming Advent Calendar 2012 3日目のエントリです。

CSS Programmingという、JSやPHPを使わずにCSSだけでプログラムチックな処理を実装しようとう試みがあります。それをお題に、クリスマスのアドベントカレンダーのように1日ずつネタを書きましょう、というのが CSS Programming Advent Calendar 2012の概要です。CSS Programmingの考え方とか作り方は今回の発起人である げこたんさんが1日目で説明していますのでそちらをどうぞ。

僕は今までCSS Programmingは作ったことはなかったのですが、年に一度のイベントなので力試しも兼ねて作ってみました。

Advent Calendar 3日目のこのエントリではウェブに腐るほど転がっている「HTMLテンプレートジェネレーター」をCSS Programming化したものを紹介します。デモを作成したので、以下からどうぞ。

CSS Programming HTML5 Template Generator

......とまぁこんな感じで一応できました。どの要素がどういう役目で、どの属性を付けるとどうなるのとかの説明は省かせてください。

head内の要素に改行を入れてそれっぽくグルーピングするオプションもつけようかと思ったのですが、:checked:not(:checked)の組み合わせ地獄だったので諦めました。その代わりと言ってはなんですが、インデントのオプションを付けてあります。

ネタを説明するほど複雑な作りはなくて、生成してるように見える要素は予め全部書いてdipslay: none;で隠してあるものを:checkedの擬似属性指定でdisplay: inline;にしてるだけです。一般的にスタイルシートは要素の親子関係性で対象をより絞り込んで装飾しますが、間接セレクタを使って離れた位置にマークアップした要素と関連付けてます。チェックに使うinput要素もdisplay: none;で隠していますが、label要素にfor属性をつけているので見えてなくても動作します。label要素は文字列を入れられるのでボタンにしやすいですね。

これを製作中、クラス名やID名を変更したり非効率なことが何回かありました。通常のウェブ製作でもそうですが、作りたいものがどの程度の規模であるかを正確に把握し、追加や変更が起きても吸収できる命名即やスタイルを用意しておくことが、スピードアップのコツですね。自分は仕事ではスピードを要求されることが多いので、図らずもその大事さを再確認することができてよかったと思いました。

次があるならもうちょっと遊びがいのある楽しいものを作りたいですね。4日目は WebTecNote@Tenderfeelさんです。よろしくお願いします。