Webページ全体の画像を作る


 Webページを画像でほしい。(スクショことスクリーンショット)

画面で見えない部分も含めて、ページ全体を画像でほしい。

この方法*を忘れることがあるので、備忘にまとめました。

*Windowsパソコンで Google Chrome を使います。


パソコン表示の全スクショ

1. Google Chrome を開き、キーボード「F12」押下

画面が2分割され、右に「検証」画面が表示されます。

2. キーボード「Ctrl」+「Shift」+「P」押下

「検証」画面の上部に「>」が表示されます。


3. 「full」入力して「Enter」押下

ページ全体の画像*がパソコンに保存されます。
*自動でつけられたファイル名.png


スマートフォン表示の全スクショ

1 の「検証」画面で「Toggle device toolbar」をクリックすると、スマホ表示になります。
後は 2 以降を行います。


全スクショの使い道

よくあるのが、ホームページを変更する時。

変更する前、今の見え方として資料に載せます。

「変更前の今はこうです」「参考ホームページはこうです」等。

ホームページは昨今、スマートフォン表示が第一。(モバイルファースト

資料に載せる全スクショは、スマホ表示も欠かせなくなっています。