当サイトはアフィリエイトプログラムを利用し商品・サービスを紹介しています。

WEBページ全体をスクリーンショットする方法 ブラウザごとで解説

ページ全体スクリーンショット



このサイトの画面全体をスクリーンショットで撮るにはどうすればいい?



WEBページ全体をスクリーンショットしたい場面って時々ありませんか?



WEBページのURLをお気に入りで取っておいたり、URLのリンクをそのまま相手に送るのとは違って、スクリーンショットしておくとキャプチャした画面をずっと保存できますし、いつでも編集することができます。


通常のスクリーンショットでは画面上に表示されている部分しか撮ることができません

画像切り取り



以前は画面全体をスクリーンショットするためには「拡張機能」を取り込んだりと少し手間がかかりました。


拡張機能や特別なソフトなどを使わずブラウザの機能だけで簡単にスクリーンショットできます。


結論から言うと、Microsoft  Edgeがとても手早く簡単に画面全体のスクリーンショットする機能が実装されています。

FirefoxGoogle Chromeでは、検証ツールの起動など少し手間がかかりますが、どのブラウザでもできますので解説します。

スポンサーリンク

Microsoft Edgeでページ全体をスクリーンショット

スクリーンショットしたい画面を開いた状態で、ブラウザ右上「三点リーダーWebキャプチャ」で進みます。

Webキャプチャ
Edge

WEBページを今後もスクリーンショットすることがありそうであれば「Webキャプチャ」を右クリックして「ツールバーに表示する」を選択しておけば、下の図のようにカメラマークボタンを右上に常時表示させておくことができます。

Webキャプチャ常時表示
Edge

Webキャプチャ」から「ページ全体をキャプチャ」をクリックすれば自動的にサイト全体を読み込んでくれます。画面のデータが多いと完了するまで少し(10秒ほど)待つ必要があるかもしれません。

ページ全体をキャプチャ
Edge

読み込みが終わると「保存」ボタンが表示されるので「保存」をクリックして任意の場所にダウンロードされて完了です!

保存クリック
Edge

Firefoxでページ全体をスクリーンショット

スクリーンショットしたいページを開いてから、空いた場所で右クリックします。「調査」をクリックして進みます。

お好みのページ上で右クリック
Firefox

右側の三点リーダーをクリックして「設定」で進みます。

Firefoxの検証ツール画面
Firefox

スクロールバーを下ろしていくと、「ページ全体のスクリーンショット撮影」という項目があるのでチェックを入れます。

右側スクロールバーを下ろしていく
Firefox

そうするとカメラマークが表示されますので、カメラマークボタンをクリックするとページ全体をスクリーンショットさせることができます!

カメラマーク表示
Firefox

Google Chromeでページ全体のスクリーンショットを撮る方法

右上の三点リーダー →「その他のツール」→「デベロッパーツール」をクリックします。

デベロッパーツールを起動
chrome

デベロッパーツールが起動します。(この図では画面の下に表示するように設定している)

①のマークのボタンをクリック。
② 右上にある三点リーダーをクリック。
Capture full size screenshotをクリックします。

デベロッパーツール(下側)
Google Chrome

右側にデベロッパーツールが表示されている場合は、下の図のように進みます。

最後に「Capture full size screenshot」をクリックして撮れます!

デベロッパーツール(右側)
Google Chrome

まとめ

撮影画像

ブラウザの機能だけでWEBページ全体のスクリーンショットを撮る設定を解説しました。
拡張機能を追加したりせずにできるのは便利で簡単です。
Edgeに機能が追加されてどんどん便利になってきていると実感します。

簡単に撮って保存させることができますので、活用していきましょう。