拡張機能やアプリをインストールする必要もなし!
縦に長いWebページ全体のスクリーンショットをGoogleChromeで撮る方法です。
この記事はこんな人にオススメ!
- WEBページ全体のスクリーンショットがほしい
- 拡張機能やアプリなど余計なインストールしたくない
- ブラウザに「GoogleChrome」を使っている
スクリーンショットのとり方
当サイト同様に、パソコン操作などの説明で、今見ている画面のスクリーンショットがほしい場合があります。
部分的には、Windowsに標準搭載された「SnippingTool]で簡単に切り取ることが出来ます。
また、画面全体のスクリーンショットがほしい時は、キーボードの「PrintScreen」キーをが簡単です。
(キーボードによって表示の違いはありますが、だいたい右上にあります)
ただ、これも画面で見える範囲までです。
場合によっては、画面全体のスクロールした部分までのスクリーンショットがほしい時があります。
ブラウザに「GoogleChrome」を使っているのなら、それも簡単に行えます。それも拡張機能など余計なインストールを行わなくてもできるのです。
GoogleChromeのデベロッパーツール
GoogleChrome の右上にある三点リーダーをクリックして『その他のツール(L)』⇒『デベロッパーツール(D)』と選択します。
デベロッパーツールは表示位置を見やすい位置に変更出来ます。
デベロッパーツールの三点リーダーをクリックして「DockSide」で表示位置を選択できます。
ここで「Ctrl」+「Shift」+「P]を押します。
操作メニューがドロップダウンされるので、その中から
を選択します。
すぐに「名前を付けて保存」のダイアログが出るので、適当な名前をつけて画像として保存します。
保存した画像を確認してみると・・・
スマホ画面のスクリーンショット
スマホ画面のスクリーンショットがほしい場合は右上のアイコンをクリックします。
プレビュー画面もスマホ表示(レスポンシブ)の幅に変更されます。しかし、幅はスマホ表示幅でも表示はパソコン表示と同じなので、ここでページの再読込をします。
ファンクションキーの「F5」を押すか、左上の再読込アイコンをクリックします。
スマホ画面が確認出来たら、先程と同じ様に「Ctrl」+「Shift」+「P]を押して「Capture full size screenshot」を選択して保存します。
保存した画像を確認すると・・
かなり下に長いですが、スマホ表示の全体のスクリーンショットが取れます。
最後に
以前に比べると、スクリーンショットの取得が断然簡単になったと思います。
資料作成やホームページの資料に活用できたら良いかと思います。