CSS

HTMLからCSSを自動生成してくれる「OneClickCSS」が便利すぎた!

HTMLを入力してボタンをクリックするだけでCSSを自動で生成してくれるツールを紹介します!

 

HTMLからCSSを自動生成してくれる「OneClickCSS」

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」で作ると階層が深くなるので、使ってない・・・!

みんなも使ってみてね!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)