HTMLからCSSセレクタを自動で書きだしてくれる「CSS Selector Generator」でスピードコーディング！

CSSセレクタを書き出す作業、自動化してぇ…

どうも。katoppa!です。
コーディングって、ルーティンワークが多いのに意外と自動化されていませんよね。

例えばzen-codingを使えば、タイプするHTMLコードをかなり簡略化出来るけど、それでも完全なる自動化というわけではありません。いえ、zen-codingはかなり効率化の功労者だと思っています。Web業界の功労賞をあげたいくらいです。それでも、もっとコーディングを楽にしたいと思ってしまう業の深いワタクシであります。

停滞気味の自動化世界に、ハードパンチをくらわすWebサービスが現れた！

その名も、「CSS Selector Generator」。名前の通り、CSSセレクタを生成してくれるWebサービスです。バシャログ。さんが作っています。
CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！

見た目はかなりキツい可愛らしいキャラクターが描かれていますが、その実力には本当に頭が上がりません。ちなみに、「ジェレ姉さん」というキャラの名前が何度挑戦しても言えないと話題に！（私の中で）たぶん「ジェネレート」という単語の印象が強すぎて、「ジェネ姉さん」と言ってしまいそうになるからだと自己分析していますがそんなことはどうでもいいですね。

試しにHTMLソースコードをジェネレートしてみた

まず、書いたHTMLコードをコピーアンドペースト。この時、全てのHTMLを入れると長くなりますので、大きなdivごとに分割すると良いかもしれません。（その場合、WrapperやContentsなど、要素を囲っている大枠は自分で追記してください。）

次に、CSSセレクタを生成するにあたって細かい設定を決めていきます。

1. 該当するエンコードを選んでください
2. 最初から入れておきたいセレクタがあれば入力します。デフォルトではaタグ関連一式が入っていますね。私はcommon.cssなどにaタグのcssを記載しますので、全て消しています。
3. セレクタのルールにチェックします。「ul.itemList」など、HTML要素を入れず「.itemList」としたい場合、「id、class セレクタからHTMLの要素タイプ名を省略」にチェックします。重複を防ぐためには「id セレクタを複数記述しない」にチェック。私は最初のチェック項目のみにチェックしています。
4. 除外する要素（cssが必要ないHTML要素）を記載します。特に気にしないならデフォルトの記載のままで良いと思います。
5. 「CSSを出力」ボタンをクリック！

一体、どうなるのか！？
ざわ…ざわ…
ババーン！

コメントも含め、一瞬で生成されました。待ち時間ゼロ。

これを使えばCSSセレクタの書き出し時間が10分→1分くらいに短縮できるのではないでしょうか。画期的です。ぜひ皆様も一度使ってみてください。

CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！