無料Chrome、Firefox 向け拡張機能

あらゆる要素の HTML と CSS をコピー

HTML/CSS Extractor は、DevTools の「要素」パネルにペインを追加します。要素を選択すると、その HTML と適用されている CSS ルールが表示され、そのまま編集、プレビュー、コピーできます。

Chrome に追加 Firefox に追加

Firefox に追加 Chrome に追加

スクリーンショット

使い方

任意のウェブサイトで DevTools を開きます。F12 キー、Mac では Cmd+Option+I を押します。
「要素」パネル（Firefox ではインスペクター）で要素を選択するか、ページ上で要素を右クリックして「検証」を選びます。
パネルのサイドバーで、「計算済み」の隣にある HTML/CSS Extractor タブを開きます。
ライブプレビューを確認し、必要ならコードを編集して、「Copy CSS」または「Copy HTML」をクリックします。

主な機能

適用されるルールだけ
ページのスタイルシートから、要素とその内側のすべてに一致する CSS ルールを取得します。:hover、::before、::after のルールや、メディアクエリも元の順序のまま含まれます。
短いセレクター
長いセレクターは、同じ要素に一致する最短の形に短縮され、元のセレクターと詳細度がコメントで示されます。
ライブプレビュー
抽出したコードを、モバイル（375 px）、タブレット（768 px）、デスクトップ（1240 px）の幅で表示できます。プレビュー内のリンクをクリックしてもページは移動しません。
編集してからコピー
CSS と HTML は、シンタックスハイライト、行番号、コードの折りたたみに対応した別々のエディターで開きます。どちらもワンクリックでコピーできます。
完全な URL
画像、フォント、リンクの相対アドレスを完全な URL に変換するので、別の場所に貼り付けてもコードがそのまま動きます。
フォントと変数
必要に応じてページの @font-face ルールを含めたり、抽出したコードで使われていない CSS 変数に印を付けたりできます。
継承されたスタイル
必要に応じて、フォントや色など親要素から継承されたテキストスタイルを、HTML を囲むラッパーに追加できます。
選択に自動で追従
別の要素を選択するたびにペインが更新されます。6 つのスイッチで含める内容を指定でき、設定は保存されます。