• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2013/02/21
書いた人:
katoppa!
カテゴリ:
CSS   HTML   Web制作
18,165 views

ルーティンワークの多いコーディング界に、颯爽と現れたWebサービス「CSS Selector Generator」。 HTMLソースコードを元に、ワンクリックでCSSセレクタを自動生成してくれます。 果たしてコーディング効率化の救世主(メシア)となるのか!? というお話し。(多少誇張表現があるかもしれません。でもサービスは便利だよ!)

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

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

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

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

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

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

http://css.bashalog.biz/

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

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

まず、書いたHTMLコードをコピーアンドペースト。この時、全てのHTMLを入れると長くなりますので、大きなdivごとに分割すると良いかもしれません。(その場合、WrapperやContentsなど、要素を囲っている大枠は自分で追記してください。)
cssgene01
次に、CSSセレクタを生成するにあたって細かい設定を決めていきます。

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

cssgene02
一体、どうなるのか!?
ざわ…ざわ…
ババーン!
cssgene03
コメントも含め、一瞬で生成されました。待ち時間ゼロ。

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

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

http://css.bashalog.biz/

あなたも「ジェレ姉さん」と言ってみよう!(「じぇねれーさん」になること請け合いです。)
ではまた!


この記事を読んだ人はこんな記事も読んでいます