CSSエクストラクター

HTML入力

抽出されたCSS

CSS抽出の例

<style>タグとインラインスタイルからCSSを抽出します。例：

スタイル埋め込みHTML

HTML入力：

入力

抽出されたCSS：

出力

上のサンプルでさらにサンプルデータを読み込めます。

CSSエクストラクターとは？

HTMLファイルは<style>タグやstyle属性にCSSを埋め込むことが多いです。CSSエクストラクターはHTMLを解析し、すべてのスタイルを1つのCSSファイルに抽出します。埋め込みスタイルを外部スタイルシートに移行する、ページが使用するCSSを監査する、スクレイプしたHTMLを編集可能なCSSに変換するのに便利です。HTML仕様とCSS仕様が構造を定義しています。

このツールはブラウザ内で動作します。HTMLを貼り付けるか.htmlファイルをアップロードしてください。<style>ブロックの内容とインラインスタイルを抽出します。サーバーには何も送信されません。出力のフォーマットにはCSSフォーマッターを。複数CSSファイルの結合にはCSSコンバイナーを使用してください。

このツールの使い方

HTMLを貼り付けまたはアップロード

HTMLを左のエディターに貼り付けるか、アップロードをクリックして.htmlまたは.htmファイルを読み込みます。サンプルでスタイル埋め込みのサンプルHTMLを読み込めます。

抽出されたCSSを確認

右のパネルに<style>タグとインラインスタイルから抽出されたCSSが表示されます。検証にはCSSバリデーターを。ミニファイにはCSSミニファイアーを使用してください。

コピーまたはダウンロード

コピーまたはダウンロードでCSSを保存します。HTMLをMarkdownに変換するにはHTMLをMarkdownにを。CSSをインラインに（メール）するにはCSSをインラインにを使用してください。

CSS抽出が役立つ場面

レガシーサイトの移行や単一HTMLドキュメントの構造化プロジェクトへの変換では、CSSの抽出が最初のステップです。メールテンプレート、CMSエクスポート、スクレイプしたページには埋め込みスタイルが多いです。このツールでリファクタリングの出発点が得られます。MDN HTMLとMDN CSSが標準を文書化しています。

抽出したCSSを他のスタイルシートと結合するにはCSSコンバイナーを。ベンダープレフィックス追加にはCSSプレフィクサーを。プリプロセッサ変換にはSCSSをCSSにまたはStylusをCSSにを使用してください。

よくある質問

データはプライベートですか？

はい。抽出は完全にブラウザ内で行われます。データはサーバーに送信されません。

@importやリンクされたCSSを抽出しますか？

いいえ。<style>ブロックの内容とstyleインライン属性のみを抽出します。外部スタイルシート（@importや<link>）は取得・含まれません。

インラインスタイルは？

インラインスタイルは抽出され、参照用にコメントで囲まれます。特定の要素に適用されるため、再利用には手動調整が必要な場合があります。

スコープ付きスタイルに対応していますか？

スコープ付きスタイル（例：Vueのscoped、Angularのビューカプセル化）はそのまま抽出されます。スコープ属性は他でCSSを使用する際に考慮が必要な場合があります。

URLから抽出できますか？

このツールは貼り付けまたはアップロードしたHTMLで動作します。URLから抽出するには、別の方法でHTMLを取得してここに貼り付けてください。