miMemo(ミメモ)

Web制作 便利ツール

[M]5秒でHTMLからCSS要素を抽出するツール「extractCSS」で、時間短縮+ストレス軽減!

Extractxss sum

こんにちは!みう(@miu0512)です。マークアップしたHTMLのソースから、一瞬でCSSに記述すべき要素を抽出してくれるとっても便利なWebツール「extractCSS」。私がコーディングの際に使用しているツールの一つをご紹介します。

HTMLのソースから簡単にCSSの要素(id class)を抽出

Webサイト制作の効率化につながるオンライン制作ツール「extractCSS」

Extractxss n01

デザインをして、HTMLでマークアップを行ったあと、いざCSS!となった際に、いちいちソースから手動で抽出する手間なく簡単にCSS構築を始められる、素敵なツールです。サイトのリニューアルや、CSSの整理もできるので結構便利!

使い方はとっても簡単!2STEPで完了です

左側の[Type or Paste Your HTML:]にHTMLソースをペースト

Extractcss

抽出方法をオプションで設定し「Extract」を押すだけ!

Extractcss 02

idだけを抽出するか、classだけを抽出するか、さらには子要素も取り出すかどうかなど細かい設定もありますが、基本はそのままでもOK。「Extract」を押すとすぐに右側にアウトプットが出力されます。

さいごに・・・

こういったツールはどんどん活用していきたいですね!私はHTMLを組み上げてからCSSを作るまでに数時間かかっていたものが一瞬で終わるようになりました。是非おすすめです!

最後までお付き合いいだだきありがとうございます!

これからも、みう(@miu0512)を応援していただけたら嬉しいです!

この記事が気に入ったら
いいね!しよう

About Me

みう

みう(@miu0512)

フリーランス
Webコーディネーター

フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

PAGETOP