画面に収まらないページのスクリーンショットをとる方法(Google Chrome)
コンテンツ
スクリーンショット
縦長で画面に収まらないページのスクリーンショットをとる場合、今までは複数回に分けてスクリーンショットをとってPhoto Shopなどで画像を繋げたりしていた。
Google Chromeのデベロッパーツールを使えば表示されていない部分も含めてスクリーンショットをとれる事が分かったので備忘録として記事にしておく。
環境
試した環境は以下の通りである。
OS | Windows10 Home バージョン1903 |
ブラウザ | Google Chrome バージョン: 89.0.4389.114(64 ビット) |
操作方法
過去記事の「M5StickCからBLEで送信された温湿度をラズパイでグラフ化してLINEで表示」の記事のスクリーンショットで試してみる。
Alt+PrtScrでスクリーンショットをとると下記の様に画面上で見えている部分のスクリーンショットが取得される。
![通常のスクリーンショット](https://i0.wp.com/www.souichi.club/wp-content/uploads/fullsize-screenshot-01.png?resize=757%2C399&ssl=1)
- F12
- ページ上で右クリック、検証
- Ctrl+Shift+i
いずれかの方法でChromeのデベロッパーツールを起動する。
![デベロッパーツールを起動する](https://i0.wp.com/www.souichi.club/wp-content/uploads/fullsize-screenshot-02.png?resize=1024%2C540&ssl=1)
- 縦に点が3つ並んだメニュー、Run Command
- Ctrl+Shift+p
いずれかの方法でコマンドラインを起動する。
![コマンドラインの起動](https://i0.wp.com/www.souichi.club/wp-content/uploads/fullsize-screenshot-03.png?resize=1024%2C540&ssl=1)
Screenshot Capture full size Screenshotを選択する。
![Screenshot Caputure full size screenshot](https://i0.wp.com/www.souichi.club/wp-content/uploads/fullsize-screenshot-04.png?resize=1024%2C540&ssl=1)
スクリーンショットファイルを適当な所に保存する。
![スクリーンショットが取得された](https://i0.wp.com/www.souichi.club/wp-content/uploads/fullsize-screenshot-05.png?resize=1024%2C718&ssl=1)
フルサイズのスクリーンショットが取得された
![フルサイズスクリーンショット](https://i0.wp.com/www.souichi.club/wp-content/uploads/fullsize-screenshot-06.png?resize=123%2C1024&ssl=1)
以上で今回の記事は終了とする。
この記事が何処かで誰かの役に立つことを願っている。
尚、当記事中の商品へのリンクはAmazonアソシエイトへのリンクが含まれています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。
最近のコメント