CSS Programming HTML5 Template Generator
- 公開日
- タグ
- CSS
- Advent Calendar
この記事はCSS Programming Advent Calendar 2012 ３日目のエントリです。
CSS Programming という、JS や PHP を使わずに CSS だけでプログラムチックな処理を実装しようとう試みがあります。それをお題に、クリスマスのアドベントカレンダーのように１日ずつネタを書きましょう、というのが CSS Programming Advent Calendar 2012 の概要です。CSS Programming の考え方とか作り方は今回の発起人であるげこたんさんが１日目で説明していますのでそちらをどうぞ。
僕は今まで CSS Programming は作ったことはなかったのですが、年に一度のイベントなので力試しも兼ねて作ってみました。
Advent Calendar ３日目のこのエントリではウェブに腐るほど転がっている「HTML テンプレートジェネレーター」を CSS Programming 化したものを紹介します。デモを作成したので、以下からどうぞ。
CSS Programming HTML5 Template Generator
......とまぁこんな感じで一応できました。どの要素がどういう役目で、どの属性を付けるとどうなるのとかの説明は省かせてください。
head 内の要素に改行を入れてそれっぽくグルーピングするオプションもつけようかと思ったのですが、:checked と :not(:checked) の組み合わせ地獄だったので諦めました。その代わりと言ってはなんですが、インデントのオプションを付けてあります。
ネタを説明するほど複雑な作りはなくて、生成してるように見える要素は予め全部書いて dipslay: none; で隠してあるものを :checked の擬似属性指定で display: inline; にしてるだけです。一般的にスタイルシートは要素の親子関係性で対象をより絞り込んで装飾しますが、間接セレクタを使って離れた位置にマークアップした要素と関連付けてます。チェックに使う input 要素も display: none; で隠していますが、label 要素に for 属性をつけているので見えてなくても動作します。label 要素は文字列を入れられるのでボタンにしやすいですね。
これを製作中、クラス名や ID 名を変更したり非効率なことが何回かありました。通常のウェブ製作でもそうですが、作りたいものがどの程度の規模であるかを正確に把握し、追加や変更が起きても吸収できる命名即やスタイルを用意しておくことが、スピードアップのコツですね。自分は仕事ではスピードを要求されることが多いので、図らずもその大事さを再確認できてよかったと思いました。
次があるならもうちょっと遊びがいのある楽しいものを作りたいですね。４日目はWebTecNoteの@Tenderfeelさんです。よろしくお願いします。