eXtract Snippet Google Chrome向けのアプリ

eXtract Snippet: 簡単にHTML/CSSコードを抽出する

eXtract Snippetは、Melwyn Pawarによって開発された便利なChromeのアドオンで、ユーザーはウェブサイトからHTMLとCSSのコードスニペットを簡単に抽出することができます。このツールを使用すると、ウェブサイト上の任意の要素を検査し、対応するHTMLとCSSのコードを迅速に取得することができます。

eXtract Snippetを使用するには、まずアドオンをインストールし、検査したい要素を右クリックして「要素を検査」を選択してChromeの開発者ツールを開きます。開発者ツール内には、「eXtract HTML CSS」というパネルがあります。このパネルをクリックし、「検査した要素のHTML/CSSを取得」ボタンをクリックします。

eXtractorは、関連するCSSのみをフィルタリングし、検査したスニペットのHTMLコードを抽出します。小さなスニペットはすばやく処理されますが、大きなスニペットは少し時間がかかる場合があります。最終的に抽出されたコードは、ウェブサイト上の実際のスニペットに非常に近いものです。

さらに、eXtract Snippetでは、CodePen、JSFiddle、またはJSbinなどの人気プラットフォームで抽出したコードをプレビューすることもできます。抽出されたコードの下にある対応するボタンをクリックするだけで、実際の動作を確認することができます。

なお、eXtract Snippetのバージョン1.4では、iframeからもHTMLとCSSを抽出することができるため、ウェブ開発者やデザイナーにとってさらに多機能なツールとなっています。