要素エクスポートは、ウェブページ上の任意の要素をクリックして、3つの形式で完全な構造をエクスポートできます。すべての子要素と属性を含む生の HTML マークアップ、クリーンなスタイルシートとして computed CSS スタイル、または構造化された JSON 表現です。デザインパターンの抽出、コードスニペットの保存、UI コンポーネントのドキュメント化に最適なツールです。
既存のページからコードを抽出する必要が生じる場面は、すべての開発者に訪れます。美しくスタイリングされたカードコンポーネント、構造がしっかりしたナビゲーションバー、複製したいフォームレイアウトなどがその例です。通常は右クリックして「要素を検証」し、Elements パネルから HTML を手動でコピーし、さらに Styles パネルから CSS を別途抽出する必要があります。要素エクスポートはこれらをワンクリックに集約します。任意の要素を選択すれば、完全な HTML、全 computed CSS、または構造化された JSON 表現を取得できます。各形式は専用タブに整形された状態で表示されます。HTML エクスポートには、適切なインデントで要素とすべての子要素が含まれます。CSS エクスポートは、ブラウザが実際にレンダリングする全 computed スタイル（著者スタイルだけでなく）を表示するため、継承・詳細度・カスケードを考慮した正確な外観を取得できます。JSON エクスポートは、ドキュメント化・テスト・プログラムによる分析に役立つ構造化データ表現を提供します。
<div class="pricing-card">
<div class="card-header">
<img src="icon.svg"/>
<h3>Pricing Card</h3>
</div>
<p>$29.99/month</p>
<button>Subscribe</button>
</div>
選択した要素の完全な HTML マークアップを取得します。すべての子要素、属性、ネスト構造が含まれます。outerHTML から得られる1行形式ではなく、適切にインデントされた整形済みの出力です。新しい HTML ファイルやコンポーネントテンプレートへそのまま貼り付けられます。
要素のすべての computed CSS プロパティを、クリーンな整形済みスタイルシートとして抽出します。タイポグラフィ、色、余白、ボーダー、レイアウト、位置情報が含まれます。CSS は継承・詳細度・カスケードを考慮した、ブラウザが実際にレンダリングする値です。
要素のタグ名、属性マップ、computed スタイル、内部テキストコンテンツ、および再帰的な children 配列を含む JSON オブジェクトを取得します。プログラムによる分析、ドキュメント化、テストフィクスチャ、カスタムツールの構築に役立ちます。
HTML、CSS、JSON タブを瞬時に切り替えられます。各形式は同じ選択要素から生成されるため、必要な表現をすぐに取得できます。要素を再選択することなく、常に3つの形式すべてが利用可能です。
各エクスポート形式は、プレビューパネルでシンタックスハイライト付きで表示されます。HTML タグは赤、属性は黄色、値は緑で表示されます。CSS プロパティは紫、値は緑です。JSON のキーと値も色分けされています。コピー前に内容を確認しやすい表示です。
「コピー」ボタンをクリックして現在のタブの内容を取得します。ステータスバーにはエクスポートの行数とバイトサイズが表示されるため、コピーする内容の量を把握できます。コピー成功時には確認フィードバックが表示されます。
複製したいカード、ヒーローセクション、またはナビゲーションバーを見つけましたか？クリックして構造用の HTML をエクスポートし、次にスタイリング用の CSS をエクスポートします。自分のコンポーネントの完全な出発点が手に入ります。
ドキュメントやデザインシステムの記録として要素を JSON でエクスポートします。構造化された表現にはタグ名、属性、スタイルが含まれており、コンポーネントインベントリの維持やドキュメントツールへの連携に最適です。
ユニットテスト用の HTML フィクスチャが必要ですか？要素の HTML をエクスポートしてテストファイルに貼り付けます。出力はクリーンに整形されており、コンポーネントテストの DOM スナップショットとしてすぐに使用できます。
CSS エクスポートは、すべての CSS ルールが適用された後にブラウザが実際にレンダリングする computed スタイルを表示します。computed の出力と著者 CSS を比較して、詳細度の競合、継承の上書き、または予期しないデフォルト値を見つけられます。
プロダクションサイトのエレガントな実装を個人のスニペットライブラリにコピーします。HTML と CSS を両方エクスポートして、将来の参照用にコンポーネントの構造とスタイリングを完全な形で保存します。
DevSuite Pro のフローティングドックを開き、要素エクスポートアイコンをクリックします。カーソルがクロスヘアセレクターに変わり、タブ付きエクスポートパネルが開きます。
ページ上の任意の要素をクリックします。選択した要素は紫色のボーダーでハイライトされ、エクスポートパネルに要素の HTML、CSS、JSON 表現が3つのタブに表示されます。
HTML、CSS、または JSON タブをクリックして、要素を異なる形式で表示します。各タブには、エクスポートコンテンツのシンタックスハイライト付き整形済みプレビューが表示されます。
プレビューを確認して必要な内容が含まれているかを確かめます。「コピー」ボタンをクリックして、現在のタブの内容をクリップボードに保存します。ステータスバーには行数とサイズが表示されます。
ページ上の別の要素をクリックすると、エクスポートパネルが新しいコンテンツで更新されます。無効化する必要はありません。クリックし続けて複数の要素をエクスポートできます。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。