【超時短”神”ツール】OneClickCSS ワンクリックでクラス名自動生成

2024年1月23日

当サイトではアフィリエイトを利用しています

この記事を読むべき人

今回は時短ツール「OneClickCSS」をご紹介します。

HTMLをマークアップして、Styleシートにクラス名を記述する作業ってかなり面倒じゃありませんか？

コピペするにも「文字をドラッグ→コピー→Styleシートにペースト」と、こんな作業を繰り返すの本当に面倒ですよね、、
選択範囲漏れでStyleが当たらなかったりする可能性だってあります。

でもそんな手間を省ける神ツールがあります！
それが「OneClickCSS」です！

余談ですが、以前ツイートした時にはプチバズが起こりました笑

https://twitter.com/disk_6_ay/status/1517824353106227201?s=20&t=BV3BwcydWeuMoCHT9WXtRA

では早速説明していきます！！

OneClickCSSとは

まず「OneClickCSS」って何なの？って話ですよね。
公式サイトから引用させていただきます！

HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。
従来のHTMLコーディグを強力にサポートします。
OneClickCSS

でも文章だけだとイメージつきませんよね笑

具体的な使用方法を見ていきましょう！！

STEP

まずは記述したHTMLをコピーして、OneClickCSSに貼り付けてください。

STEP

次に真ん中のボタンを押します。

ここでは、どんな形で吐き出したいか選択してください。

SASSでネストを使用している方も使用でき、色々なパターンをはき出すことが出来ます。

STEP

するとあら不思議、Styleシートが一瞬で出来上がりました！

あとはCSSを全力で書いていくだけです！！！

どうでしたか？？　めちゃめちゃ簡単じゃありませんか？

実際、私自身はセクションごとにHTMLを書いてCSSを書くのでかなり時短になり、スペルミスなどは無くなりました！

LPをコーディングする時にもいいかもしれませんね。

コーディングする方には本当におすすめのツールサイトです！！

皆さんもぜひ使ってみてください！　では！！

この記事が気に入ったら
フォローしてね！

Follow @disk_6_ay

よかったらシェアしてね！