【Edge】印刷時にEdgeのプレビューで「指定要素だけ非表示」にしてから出力する手順

Webページを印刷する際、不要な広告やヘッダー、サイドバーなどを非表示にしたいことがあります。しかし、Edgeの標準の印刷プレビューには特定の要素だけを隠す機能がありません。この記事では、Edgeのデベロッパーツールを使って印刷前に任意の要素を非表示にする方法を詳しく解説します。この手順を覚えれば、必要な部分だけをすっきりと印刷できるようになります。

Edgeのデベロッパーツールで要素を非表示にする仕組み

Edgeには印刷プレビュー上で直接要素を消すボタンはありません。代わりに、ブラウザのデベロッパーツール(開発者ツール)を使ってページのHTMLやCSSを一時的に編集します。デベロッパーツールでは、画面上の任意の要素を選択してスタイルを変更できます。非表示にしたい要素に「display:none」というCSSを追加すると、その要素が即座に画面上から消えます。この変更はブラウザを更新するまで保持されるため、印刷前に適用すれば、印刷結果にも反映されます。この方法は、一度設定すればそのページを開いている間は有効です。印刷が終わればページをリロードして元に戻せます。

Edgeで印刷時に特定の要素を非表示にする具体的な手順

以下の手順に従って操作します。手順はWindows11上のEdge最新バージョンを基準にしています。Windows10でも同様の操作が可能です。

1. 印刷したいページをEdgeで開く
   印刷したいWebページを通常通り開きます。この状態でデベロッパーツールを起動します。
2. デベロッパーツールを起動する
   キーボードのF12キーを押すか、右上のメニュー(…)から「その他のツール」→「デベロッパーツール」を選択します。画面の下部または右側に開発者ツールが表示されます。
3. 要素選択ツールを有効にする
   デベロッパーツール左上の四角に矢印が重なったアイコン(インスペクター)をクリックします。これにより、画面上の要素をクリックして選択できるようになります。
4. 非表示にしたい要素をクリックする
   Webページ上で、印刷時に消したい部分(例:広告バナー、サイドバー、フッターなど)をクリックします。すると、デベロッパーツールの「要素」タブ内で該当するHTMLコードがハイライトされます。
5. スタイルパネルでdisplay:noneを追加する
   デベロッパーツール右側の「スタイル」タブを確認します。ハイライトされた要素のスタイル一覧が表示されます。最上部の空欄(インラインスタイルを追加する場所)をクリックし、「display: none;」と入力してEnterキーを押します。すると、その要素が即座に画面から非表示になります。
6. 印刷プレビューで確認する
   要素が非表示になった状態で、Edgeのメニューから「印刷」(Ctrl+P)を選びます。印刷プレビューには非表示後の状態が反映されているはずです。必要に応じてさらに他の要素も同じ手順で非表示にできます。
7. 印刷を実行する
   プレビューで問題なければ、そのまま印刷をクリックして出力します。印刷後、ページを更新(F5)すれば元の表示に戻ります。

要素非表示の応用テクニックと注意点

複数の要素をまとめて非表示にする場合

同じ種類の要素(すべての広告など)を一度に非表示にしたい場合は、親要素を非表示にするか、共通クラスを利用します。要素選択ツールで一つ選んだ後、スタイルパネルでクラス名を確認し、そのクラスに対してスタイルシート内でdisplay:noneを追加することも可能です。ただし、そのクラスが他の必要な要素にも使われている場合は注意が必要です。

画像だけを非表示にするには

画像(imgタグ)を非表示にする場合も同様です。画像をクリックして選択し、display:noneを追加します。ただし、画像の周りの余白も消したい場合は、親のdivごと非表示にするとよいでしょう。

変更が元に戻らない場合の対処

デベロッパーツールでの変更はページをリロードすると失われます。もし印刷後に変更を保持したい場合は、ブラウザを更新せずにそのまま他の作業を続けてください。ただし、意図せずリロードしてしまうと元に戻るため、印刷が完了したらすぐにページを更新して通常表示に戻すことをおすすめします。

JavaScriptで動的に変更される要素

ページ内の要素がJavaScriptで動的に生成・変更される場合、display:noneの適用後に再描画されて再び表示されることがあります。このような場合は、非表示にした後すぐに印刷プレビューを開くか、JavaScriptの実行を一時停止(デベロッパーツールのソースタブでブレークポイントを設定)する方法もありますが、一般的なWebページではほとんどの要素が一度固定されれば問題ありません。

デベロッパーツール方式と他の印刷調整方法の比較

まとめ

Edgeのデベロッパーツールを使えば、印刷プレビューでは直接操作できない要素の非表示を実現できます。手順はF12キーでツールを開き、非表示にしたい要素を選択して「display:none」を追加するだけです。この方法を覚えておけば、不要な広告や装飾を排除したクリーンな印刷が可能になります。応用として、他のCSSプロパティを変更してフォントサイズや色を調整することもできます。ぜひ実際の業務で活用してみてください。