HTMLのコードからCSSセレクタを自動出力！「CSS Selector Generator」

もはや日本は熱帯ではないのか。と感じざるを得ないminamiです。

先日のCSS Nite in Ginza, Vol.49「バシャログ LIVE」に合わせてリリースしました新サービス2つ目、「CSS Selector Generator」について、改めてご紹介します。

CSS Selector Generatorとは？

CSS Selector Generatorは、HTMLのコードからCSSファイルのフォーマットを自動で出力するツールです。階層構造にしたがって要素のセレクタを自動で書き出してくれるので、あとはCSSのプロパティを書くだけ！の状態にしてくれます。

使い方は上から順に3つのステップを踏むだけです。

Step1 HTMLコードをペーストする

使い方はいたって簡単。まずCSSファイルを作りたいHTMLのコードをまるごとコピーして、Step1のテキストエリアにペーストします。

Step2 設定をする

ここでは書き出されるCSSの文字コードと、HTMLの要素から解析する以外に、最初から入れておきたいセレクタを追加できます。
デフォルトではaタグの疑似要素が入っています。

ここまでできたら「CSSを出力」ボタンを押します。

Step3 あとはコピーするだけ！

Step3のテキストエリアにCSSの記述が書き出されます！あとはコピーして好きなように成型してください。

いかがでしょうか？手前味噌になりますが、僕はこのツールを使うことで大分コーディングが楽になった気がします。
この後もかゆい所に手が届くアップデートをしていく予定ですので、是非CSS Selector Generatorを使ってみてください！セレクちゃんジェレ姉さんのキャラグッズが欲しいという要望もゆるくお待ちしております！