【Google Chrome】サイト全体をスクリーンショットする方法【拡張機能不要】

ひぐま
ひぐま

Edge・Firefoxブラウザ編を追加しました!

【Edge・Firefoxブラウザ編】サイト全体、一部分をスクリーンショットする方法【拡張機能不要】


--------

webサイトの制作や保守業務などをしていると、ウェブページのスクリーンショットを要する機会が度々訪れます。

画面を移動しながらwinキー + PrintScreenキーでスクリーンショットを保存できたりしますが、

たまにサイトをヘッダーからフッターまで、まとめて全部キャプチャしたいなと思う時があります。

拡張機能などをインストールして全体をキャプチャする方法もありますが、Chromeブラウザだとすごく簡単にサイト全体のキャプチャをとることができたので、

本日はその方法をお教えします。

Windowsの場合

お使いのパソコンがWindowsの場合は

  1. スクリーンショットを撮りたいサイト上でCtrlキー、ShiftキーとIキーを押します。→デべロッパーツールが開きます。
  2. デべロッパーツールが開いた状態でCtrlキー、ShiftキーとPキーを押します。
  3. 入力欄が出てくるので「full」と入力するとスクリーンショットの機能が表示されるのでEnterキーを押します。
  4. 少し待つと保存できます。

Macの場合

お使いのパソコンがMacの場合は

  1. スクリーンショットを撮りたいサイト上でcommandキー、optionキーとIキーを押します。→デべロッパーツールが開きます。
  2. デべロッパーツールが開いた状態でcommandキー、ShiftキーとPキーを押します。
  3. 入力欄が出てくるので「full」と入力するとスクリーンショットの機能が表示されるのでreturnキーを押します。
  4. 少し待つと保存できます。

弊社のHPでやってみます。↓

screen_01.jpg

screen_02.jpg

screen_03.jpg

すると...

screen_04.jpg

できました!

みなさんも必要になった時はお試しください。

追記

最近Google ChromeベースになったChromium版Microsoft Edgeの場合はカタカナで「フル」と入力するとフルスクリーンショットの機能が一番上にでてくるみたいです。

こちらも同様にスクリーンショットできますので、よかったら試してみてくださいね。

関連記事