https://idea-hack.com/blog/50594/
FirefoxでHTML要素で絞って画面の一部をスクリーンキャプチャーする方法

FirefoxでHTML要素で絞って画面の一部をスクリーンキャプチャーする方法

あまり知られていませんが、FirefoxではHTML要素で絞ってスクリーンキャプチャーを取ることが出来ます。

この機能を使えば、WEBページの中で取得したい部分を100%正確にキャプチャすることが出来るので大変便利です。

KAZUKI
動画でも解説していますが、手順も下記にまとめてます。

FirefoxでHTML要素で絞ってスクリーンキャプチャーを取得する手順

Step 1
開発者ツールを開く
キーボードショートカット「F12」を使用すれば開くことが出来ます。
Step 2
HTML要素を選択
画像のキャプチャーを取得したいHTML要素を選択してください。
この時、インスペクター画面で選択することが重要です。
Step 3
右クリックで「ノードのスクリーンショットを撮影」を選択
すると、ダウンロードフォルダにそのノード内(HTML要素に囲まれた部分)のpng画像が作成されます。
Step 4
ダウンロードフォルダを確認
ダウンロードフォルダを確認し、保存されていることを確認します。
FirefoxでHTML要素で絞って画面の一部をスクリーンキャプチャーする方法