ChromeやFireFoxでは既定の機能として全画面キャプチャ機能が備えられています。
※IE、Edgeではこの機能はないようです。
例)Yahooの全画面キャプチャ(キャプチャしたサムネをキャプチャしてます。だって元画像6MBもあるんですもの)
![](https://i1.wp.com/muc365.com/wp-content/uploads/2019/10/image-5.png?resize=68%2C629&ssl=1)
◆Chrome
開発者ツールを起動(F12)→Shift + Ctrl + P → [full]とタイプ →[Capture full size screenshot]が出たらEnter
![](https://i1.wp.com/muc365.com/wp-content/uploads/2019/10/image.png?ssl=1)
◆FireFox
開発者ツールを起動(F12)→(右上[・・・]→設定から[ページ全体のスクリーンショットを撮ります]を有効にする)→右上にカメラアイコン出てくるので押す
![](https://i2.wp.com/muc365.com/wp-content/uploads/2019/10/image-1.png?ssl=1)
![](https://i1.wp.com/muc365.com/wp-content/uploads/2019/10/image-2.png?ssl=1)
ではこれで、と撮ってみますが途中までしか取れません。スクロールのせいです。
![](https://i0.wp.com/muc365.com/wp-content/uploads/2019/10/02.png?fit=1024%2C496&ssl=1)
なのでスクロールを消します。同じく開発者ツールのコンソールで以下のコマンドを実行します。
document.querySelector(“div[class^=’scrollRegion’]”).style.overflow = ‘visible’
![](https://i0.wp.com/muc365.com/wp-content/uploads/2019/10/image-3.png?ssl=1)
![](https://i2.wp.com/muc365.com/wp-content/uploads/2019/10/image-4.png?fit=1024%2C377&ssl=1)
この状態で全画面スクリーンショットを撮ると…
![](https://i2.wp.com/muc365.com/wp-content/uploads/2019/10/03.png?fit=784%2C1024&ssl=1)
上手に撮れました。
モダンはスマホ対応が基本なこともあり縦長の画面構成になりがちです。ページのレビューの際、作ったページをSNSで自慢したい際など、ご活用くださいませ。
※ 19/10 執筆時点の動作です