HTMLタグからCSSセレクタを抽出してCSSを自動生成する

静的なコーディングを行う際、まずHTMLタグを記述してから、記述したclass名をCSSセレクタとしてCSSファイルに書き、CSSの中身を記述していく、という手順が基本になります。その中で、「CSSセレクタをCSSファイルに書く」という作業が毎回生じて、意外と時間をとられてしまうので、HTMLタグからCSSセレクタを抽出してCSSを自動生成するツールを作成しました。

初めてご利用の方はページ下部をご利用下さい。

HTMLタグを入力

HTMLタグ

生成後のCSS

このツールの使い方

HTMLタグを入力して「CSSを生成」ボタンをクリックすると、「生成後のCSS」のテキストエリア内に生成されたCSSが表示されますので、コピーしてご使用下さい。

このツールが生成するCSSの対象

classとIDどちらでも対象となり、親子関係を含めてCSSのセレクタが生成されます。classとIDどちらも付与されている場合、classが優先されます。

classとIDどちらも付与されていない要素は、生成されるCSSに含まれません。

Specializing in coding and
building Wordpress