HTMLを入力してボタンをクリックするだけでCSSを自動で生成してくれるツールを紹介します！
HTMLからCSSを自動生成してくれる「OneClickCSS」
「OneClickCSS」ってサイトを最近見つけました。
このサイトに書いたHTMLをコピペすると、一瞬でCSSの一覧を作ってくれます。
HTMLを書いてからCSSを書くのが一般的（？）だと思うので、一個一個IDやclassを書いている人は、今回紹介するサイトを使用してみてください！
めちゃくちゃ捗ります！
「OneClickCSS」の使い方
まずはHTMLを用意！
今回はこんな感じでHTMLを用意しました。
<div id="sample"> <h1>見出し</h1> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </div>
では早速「OneClickCSS」を使っていくー！
①「HTML source」に今のソースをコピペします。
②作成したいCSSをを選ぶをクリック。
「Simple CSS」の結果
/*============================
#sample
============================*/
#sample{
}
「Childrens CSS」の結果
/*============================
#sample
============================*/
div#sample {
}
div#sample h1 {
}
div#sample p {
}
「Child CSS」の結果
/*============================
#sample
============================*/
div#sample {
}
div#sample>h1 {
}
div#sample>p {
}
「LESS/SCSS CSS」の結果
/*============================
#sample
============================*/
div#sample {
h1 {
}
p {
}
}
「SASS CSS」の結果
/* * #sample */ div#sample h1 p
こんな感じ！
使い方によって選べるのがいいですね。
ちなみに僕は、「Simple CSS」で書き出して、SCSSに貼り付けて使ってます。
「LESS/SCSS CSS」で作ると詳細度が上がってしまうので、使ってない・・・！
この「OneClickCSS」でもHTMLをCSSを自動生成できますが、VSCodeの拡張機能でも同じことができるものを見つけました！
後日記事でも紹介しますが、「ExtractionCssSelector」でできます！
待ちきれないという方は、ググってみてください！
ABOUT ME
