Windows版Chromeブラウザの標準機能だけでWebページ全体のスクリーンショットを撮る方法

Windows版Chromeブラウザの標準機能だけでWebページ全体のスクリーンショットを撮る方法

Windows版Chromeブラウザで、スクロールが必要な縦に長いWebページ全体のスクリーンショット(画面キャプチャー、スクショ)を撮りたい場合、拡張機能で対応するのが一般的ですが、実はChromeブラウザの標準機能(開発者ツール)だけでも、Webページ全体のスクリーンショットを撮ることができます。

開発者ツールを使った方法は、手順的には少々面倒ですが、たまにしかスクリーンショットを撮ることがないなら、この方法で十分でしょう。

ここでは、Windows版Chromeブラウザで開発者ツール機能を使って、Webページ全体のスクリーンショットを撮る方法を紹介します。

動作環境

この記事は、以下の環境で実行した結果を基にしています。他のエディションやバージョンでは、動作結果が異なる場合があることをご了承ください。

ソフトウェアバージョン
Windows10 Pro 64bit20H2
Google Chrome88.0.4324.190

Webページ全体のスクリーンショットを撮る

Chromeブラウザの開発者ツールを使って、Webページ全体のスクリーンショットを撮る手順は、次のとおりです。

まず、Chromeブラウザを起動して、スクリーンショットを撮影したいWebページを表示した状態で、画面右上にある「︙」をクリックして、メニューから「その他のツール」>「デベロッパーツール」の順にクリックします。

もしくは、Webページを表示した状態で「F12」キーを押すことでも、デベロッパーツールを起動できます。

Windows版Chromeブラウザの標準機能だけでWebページ全体のスクリーンショットを撮る方法

画面下や右にデベロッパーツールが表示されたら、ページ上部にデバイスツールバーが表示されているか確認し、表示されていないときは「toggle device toolbar」をクリックして表示させます。

Windows版Chromeブラウザの標準機能だけでWebページ全体のスクリーンショットを撮る方法

つぎに、ページ右側に表示されているバーをドラッグして、Webページの幅を調節します。

Windows版Chromeブラウザの標準機能だけでWebページ全体のスクリーンショットを撮る方法

ページ幅を調節したら、デバイスツールバーの右端にある「︙」をクリックして、メニューから「Capture full size screenshot」を選択します。

Windows版Chromeブラウザの標準機能だけでWebページ全体のスクリーンショットを撮る方法

以上で、表示されているWebページ全体のスクリーンショットが撮影され、自動的に画像ファイル(PNG形式)がダウンロードされます。

ダウンロードされた画像ファイルを開くと、Webページ全体のスクリーンショットを確認できます。

Windows版Chromeブラウザの標準機能だけでWebページ全体のスクリーンショットを撮る方法

ちなみに、デバイスツールバーで端末名や画面サイズを指定すれば、各種スマートフォンなどでWebページを表示したときの状態を確認したり、スクリーンショットを撮影することもできます。

Windows版Chromeブラウザの標準機能だけでWebページ全体のスクリーンショットを撮る方法

あとがき

ちなみに、Chromeブラウザと同じエンジンを使用している「Microsoft Edge」でも同じ手順でWebページ全体のスクリーンショットを撮影することできますが、Microsoft Edgeなら「Webキャプチャ」を利用するのが簡単でしょう。

Windows10でWebページ全体のスクリーンショットを撮るならMicrosft Edgeで
Windows10でWebブラウザからWebサイトを閲覧していて、Webページ全体を画像ファイルとして保存したい場合、方法としてまず思い...

記事が役立ったらシェアしてくれるとうれしいです。

あなたにおすすめのコンテンツ