「要素の削除/非表示」を使えば、Webページ上の任意の要素をワンクリックで削除したり一時的に非表示にしたりできます。スクリーンショット用にページをクリーンアップしたり、邪魔な広告やクッキーバナーを削除したり、特定のセクションがない場合のレイアウトをテストしたり — すべて非破壊的に行えます。
ポートフォリオ用のクリーンなスクリーンショットを撮影する場合でも、セクションを削除したときにページレイアウトがどのように再フローするかテストする場合でも、コンテンツを読むために邪魔なポップアップオーバーレイを隠したい場合でも — 「要素の削除/非表示」はそのためのツールです。2つのモードを提供します：「削除」（DOM から要素を完全に削除し、周囲のコンテンツが空いたスペースに再フロー）と「非表示」（visibility を hidden に設定し、レイアウト内の要素のスペースを保持）。両操作とも undo で元に戻せます。クリック前に赤いホバーオーバーレイが影響を受ける要素を正確に示すため、推測は不要です。ツールは削除および非表示にした要素の数をカウントし、一つずつまたは一括で undo できます。すべての DevSuite ツールと同様、変更は非破壊的で、ページを更新するとすべてが元に戻ります。
削除モードでは、任意の要素をクリックしてページから完全に削除します。要素が DOM から取り除かれ、周囲のコンテンツがスペースを埋めるように再フローします — HTML が存在しなかった場合と同様です。特定のセクションがない状態でページがどのように見えるかを確認するのに最適です。
非表示モードでは、要素をクリックしてレイアウト内のスペースを保ったまま不可視にします。要素は透明になりますが、ボックスの寸法は残るため、残りのページレイアウトはそのままです。レイアウトシフトなしに視覚的なウェイトをテストするのに役立ちます。
クリックする前に、マウスを動かすと影響を受ける要素に赤い半透明のオーバーレイが表示されます。このプレビューにより、誤った要素の削除を防ぎます — 削除しようとしているものを常に正確に確認できます。
すべての削除・非表示アクションは undo 履歴として追跡されます。undo ボタンをクリックすると最後のアクションが元に戻り、要素が復元されます。複数のアクションを順番に undo して変更を戻せます。
現在のセッションで削除した要素の数と非表示にした要素の数をライブカウンターで表示します。一目で変更数と利用可能な undo の数がわかります。
すべての変更は純粋に視覚的なもので、ブラウザのメモリ上にのみ存在します。ページの実際のコードは一切変更されません。いつでもページを更新すれば、削除・非表示にしたすべての要素が即座に元の状態に戻ります。
スクリーンショットを撮影する前に、クッキー同意バナー、チャットウィジェット、プロモーションポップアップ、スティッキーヘッダー、メールマガジンオーバーレイを削除します。視覚的な雑音なしに、ページコンテンツのクリーンでプロフェッショナルなキャプチャを取得できます。
お客様の声セクションなしでページがどのように流れるか気になりますか？サイドバーを削除するとどうなるか？セクションを削除すれば、コード変更なしにレイアウトの再フローを即座に確認できます。
侵入的な広告が多いコンテンツ重視のページでは、広告要素を非表示にすることで、邪魔されずに記事やドキュメントを読めます。コンテンツが利用可能なスペースを埋めるように再フローします。
複雑な Webページを参照するプレゼンテーションを準備していますか？要点に関係のない要素を削除し、議論したいセクションだけを残します。そして簡略化されたビューをスクリーンショットします。
要素が重なり合ったり互いを隠したりしている場合、上の要素を削除して背後にあるものを確認します。背後にあるものを素早く確認したいだけのときは、DevTools で z-index や display プロパティを調整するより速い方法です。
DevSuite Pro のフローティングドックを開き、「要素の削除/非表示」アイコンをクリックします。削除モード（要素を削除してレイアウトを再フロー）または非表示モード（不可視にするがスペースを保持）を選択します。
ページ上でマウスを動かします。赤い半透明のオーバーレイがカーソル下の要素をハイライトし、クリック時に何が影響を受けるかを正確に示します。
ハイライトされた要素をクリックします。削除モードでは要素が削除され、周囲のコンテンツが再フローします。非表示モードでは要素が不可視になりますが、スペースは保持されます。
クリックを続けてさらに要素を削除するか、undo をクリックして最後に削除/非表示にした要素を元に戻します。アクションカウンターに現在の変更数が表示されます。
試行が完了したら、ページを更新してすべての要素を元の状態に即座に復元します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
