HTMLからクラスやIDを検出してCSSのひな形を作成してくれるWEBサービス「extractCSS」

HTMLからクラスやIDを検出してCSSのひな形を作成してくれるWEBサービス「extractCSS」

HTMLからクラスやIDを検出してCSSのひな形を作成してくれるWEBサービス「extractCSS」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加

extractCSSは、HTMLの内容からCSSのひな形を作成してくれるWEBサービスです。

HTMLを貼り付けるだけで、クラスやIDを検出してCSSのひな形を作成してくれるので、かなりコーディングの時間短縮を図ることができます。

例えば、以下のようなHTMLだとしたら、

<div id="wrapper">
<div id="logo"><h1><a href="">サイト名</a></h1></div>
<div class="content">
<ul class="menu">
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>
</div>
</div>

以下のようにCSSのひな形を作成してくれます。

#wrapper {
}
#logo {
}
#logo > h1 {
}
.content {
}
.menu {
}
.menu > li {
}
.menu > li > a {
}

あとは、プロパティと値を入れていくだけです。インデントの種類や括弧の位置も選択することが可能です。

スポンサードリンク

extractCSSの使い方

extractCSSの使い方は、以下の通りです。

1. extractCSSにアクセスします。
2. 「Type or Paste Your HTML」にHTMLを貼り付けます。

Type or Paste Your HTML

3. 「Options」でインデントの種類や括弧の位置などを決めます。

Options

4. [Extract!]をクリックします。

Extract!

5. 「Extracted CSS」にCSSのひな形が表示されます。

Extracted CSS

作成されたCSSをコピーして、style.cssなどのCSSファイルを作成します。

あとがき

HTMLを見ながらセレクタを書いていくのって、地味に面倒ですよね。extractCSSを使えば、かなり楽できそうです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。