WEB Tips ウェブ・アプリ

Chrome,Firefoxで拡張機能なしでページ全体のスクリーンショットを撮る

2021-10-07

本記事にはプロモーションが含まれています。

Chrome,Firefoxで拡張機能なしでページ全体のスクリーンショットを撮る

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

ウェブページや画面のスクリーンショットを撮るのにMac標準のスクリーンショット機能(Cmd+Shift+3 or 4)とかやAwesome ScreenShotなどを多用してきました。

でも、ながーいWebページでヘッダーが固定されていたりする様なページ全体をスクリーンショットすると固定ヘッダーが何度も何度も現れてきて綺麗に撮れないのがストレスでした。

でも最近知ったのがFirefoxやGoogleChrome自体でもスクリーンショットが撮れるということ。

それも前述の様な固定ヘッダーがあっても綺麗に撮れるのです。

Firefoxで拡張機能なしでスクリーンショットを撮る

Firefoxで拡張機能を使わずにスクリーンショットを撮るのはとっても簡単でした。

スクリーンショットを撮りたいページで右クリックして「スクリーンショットを撮影」を選ぶだけ。

すると右上に「ページ全体を保存」か「表示範囲を保存」かを選ぶことができます。

一部のみ撮る場合はページ上でクリックしてドラッグで範囲を指定できます。ページ全体を保存を選べば、保存先を指定するだけでページ全体を撮影できます。

Google Chromeで拡張機能なしでスクリーンショットを撮る

Firefoxの方が簡単にスクショ撮れますがGoogle Chromeでも拡張機能を使わずにスクリーンショットが撮れました。

Chromeの場合は、デベロッパーツールからになります。Cmd+Opt+I(マックの場合)でデベロッパーツールを開いて、右端にある丸三つのボタン(名前なんて言うんでしょう)をクリックでスクリーンショットが現れます。

ページ全体を撮るなら「Capture full size screenshot」を選択。

ChromeでもFirefox同様綺麗なスクリーンショットが撮れました。

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, ウェブ・アプリ