HTMLを書いたあとCSSを書くために、CSSのファイルに１つ１うつ「.◯◯」とか入力するのがめんどい！
わかるわかり味が深いよ！
今回はそんなめんどくさがり屋さんのための便利ツールを紹介するよ！
入力してボタンをクリックするだけで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をを選ぶをクリック
/*============================
#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」で作ると階層が深くなるので、使ってない・・・！
webサイトを作るとき非常に捗るので、コーダーはぜひ使ってみてね！
ABOUT ME
