Windows版Chromeブラウザで、スクロールが必要な縦に長いWebページ全体のスクリーンショット（画面キャプチャー、スクショ）を撮りたい場合、拡張機能で対応するのが一般的ですが、実はChromeブラウザの標準機能（開発者ツール）だけで、Webページ全体のスクリーンショットを撮ることができます。
開発者ツールを使った方法は、手順的には少々面倒ですが、たまにしかスクリーンショットを撮ることがないなら、この方法で十分でしょう。
そこでここでは、Windows版Chromeブラウザで開発者ツール機能を使って、Webページ全体のスクリーンショットを撮る方法を紹介します。
目次
動作環境
この記事は、以下の環境で実行した結果を基にしています。他のエディションやバージョンでは、動作結果が異なる場合があることをご了承ください。
| ソフトウェア | バージョン |
|---|---|
| Windows10 Pro 64bit | 20H2 |
| Google Chrome | 88.0.4324.190 |
Webページ全体のスクリーンショットを撮る
Chromeブラウザの開発者ツールを使って、Webページ全体のスクリーンショットを撮る手順は、次のとおりです。
まず、Chromeブラウザを起動して、スクリーンショットを撮影したいWebページを表示した状態で、画面右上にある「︙」をクリックして、メニューから「その他のツール」＞「デベロッパーツール」の順にクリックします。
もしくは、Webページを表示した状態で「F12」キーを押すことでも、デベロッパーツールを起動できます。
画面下や右にデベロッパーツールが表示されたら、ページ上部にデバイスツールバーが表示されているか確認し、表示されていないときは「toggle device toolbar」をクリックして表示させます。
つぎに、ページ右側に表示されているバーをドラッグして、Webページの幅を調節します。
ページ幅を調節したら、デバイスツールバーの右端にある「︙」をクリックして、メニューから「Capture full size screenshot」を選択します。
以上で、表示されているWebページ全体のスクリーンショットが撮影され、自動的に画像ファイル（PNG形式）がダウンロードされます。
ダウンロードされた画像ファイルを開くと、Webページ全体のスクリーンショットを確認できます。
ちなみに、デバイスツールバーで端末名や画面サイズを指定すれば、各種スマートフォンなどでWebページを表示したときの状態を確認したり、スクリーンショットを撮影することもできます。
あとがき
ちなみに、Chromeブラウザと同じエンジンを使用している「Microsoft Edge」でも同じ手順でWebページ全体のスクリーンショットを撮影することできますが、Microsoft Edgeなら「Webキャプチャ」を利用するのが簡単でしょう。
