Webページ全体の画像を作る(スクショ)



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

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

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


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


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

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

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

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

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


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

下に表示された「Screenshot」をクリック。



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


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

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

部分スクショの取り方
取りたい画面で「Windows」キーを押しながら「Shift」+「S」を押下。
暗くなった画面で、スクショにした箇所を左上から右下までドラッグ。

部分スクショは、ペースト(Ctrl+V)で貼り付けられて便利。
このブログにも貼り付けられます。



全スクショの使い道

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

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

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

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

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