Help us understand the problem. What is going on with this article?

ブラウザ別 Web ページ全体のスクリーンショットを撮る方法

最近、わざわざ拡張機能を追加しなくても、実は「 ブラウザには Web ページ全体のスクリーンショットを撮る機能が元から備わっているものもある 」ということを、初めて知りました。

もちろん、拡張機能を使った方が楽だったり、高性能だったりするかもしれませんが、私のように、できるだけ拡張機能は増やしたくない!というタイプの人には、朗報です。

Chrome の場合

まず、以下のいずれかの方法で、デベロッパーツールを起動します。

  • ファンクションキーの「 F12 」を押す
  • ショートカット「 command + option + I 」を利用する
  • メニューから「 ツール > ウェブ開発 > 開発者ツール 」を選択する
  • ページを右クリックしてコンテクストメニューから「 検証 」を選択する

次に、下の画像の矢印で示しているように、メニューを開いて「 Capture full size screenshot 」をクリックしてください。

Chrome_Capture_full_size_screenshot.png

なんと、これだけで、ページ全体のスクリーンショットがダウンロードできます!

まぁ、ちょっと分かりづらいかもしれませんが、普段からデベロッパーツールを使っていても、この機能は知らなかった!という人は、覚えておくと良いのではないでしょうか?

Chrome のデベロッパーツールでは、スマートフォン等での表示を確認できたり、簡単に任意のサイズに調整することも可能なので、そのスクリーンショットが撮れると考えれば、かなり有用です。

Firefox の場合

次の画像を見てもらえれば分かる通り、一見 Chrome と同じような手順なのですが、実は Firefox では、デベロッパーツールなんてものを起動する必要はありません!

Firefox_スクリーンショットを撮る.png

しかも、UI が分かりやすい上に、ページ全体を保存するか、表示されている範囲だけを保存するか、選択できるだけでなく、

Firefox_ページ全体を保存.png

次のように、一部を選択する機能まで付いていて、単純にダウンロードするだけでなくコピーもできたりと、意外と高性能だったりします。

Firefox ダウンロード 2.png

これなら、大抵の場合において、拡張機能は必要ないように思えますし、非常に使いやすいので、使ったことのない人には、是非とも一度、触ってみて欲しいですね。

Safari の場合

最後に、Safari の場合も紹介しておきましょう。

まず、Chrome と同じように、デベロッパーツールを起動してください。

ちなみに、私の MacBook Pro では、Chrome と違って「 F12 」は効きませんでした。

メニューから開きたい場合は、環境設定の「 詳細 」で「 メニューバーに”開発”メニューを表示 」のチェックボックスをオンにした上で「 開発 > Webインスペクタを表示 」を選択します。

コンテクストメニューでは「 要素の詳細を表示 」という項目になっていますね。

そして、ここからは Chrome よりもさらに分かりにくいかもしれないのですが、下の画像のように、表示されている HTML の「 body 要素 」を右クリックして、コンテクストメニューを出してみてください。

すると「 スクリーンショットを取り込む 」という項目があるので、それを選択すれば「 body タグ 」で囲まれた部分、すなわち、ページ全体のスクリーンショットが保存できます。

Safari_スクリーンショットを取り込む.png

まとめ

いかがだったでしょうか?

こうしてみると、案外、それぞれに利点があるのではないか?ということにも気付かされます。

Chrome では、ページの表示において任意のサイズを指定できますし、

Firefox には、拡張機能並みの使い勝手の良さがあり、

Safari なら、一部の要素だけをスクリーンショットに撮ることも可能です。

とは言え、その違いを使い分ける必要が生じるようなことが、果たして、今後あるのかどうかは、神のみぞ知るといったところでしょうね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした