脱初心者備忘録

PCでブラウザのスクリーンショットを撮って保存する方法

スマホだとボタン一つで簡単にスクリーンショットしてImageに保存できますよね。
同じように、PCでさっと簡単にスクリーンショットを撮って保存する方法をご紹介します。

簡単なのでお試しください。

Windowsボタンとプリントスクリーンで保存

通常のWindowsのPCであれば、キーボードに、Windowsロゴマークのキーと、PrtScと書かれたプリントスクリーンのボタンがあるはずなので、この2つを同時に押します。

すると、PCのピクチャフォルダの中にスクリーンショットというフォルダができて、その中に、今撮影したスクリーンショットが、「スクリーンショット.png」という名前で保存されます。

簡単ですね。

これはブラウザに限らず、モニターをスクリーンショットする方法なので、色々使えると思います。

ただ、マルチディスプレイの方は、全部の画面のスクリーンショットが保存されちゃうので、注意。
面倒だけど、Snipping ToolやPhotoshop等で切り抜きの手間が必要です。

マルチディスプレイの方には、WIndowsキー+Shift+S でのスクリーンショットがおすすめです。
キーを押すと、切り抜き範囲を指定して画面が保存できます。
こちらのほうが全てにおいて楽かもしれません。

Chromeの検証でスクリーンショットを撮る(ブラウザのフルサイズ可能)

Chromeであれば、画面を右クリックすると、一番下に検証という項目が出るので、そこを選択すると、ブラウザウィンドウを分割した画面が現れます。

Chromeのこの画面からは、デバイス別に表示を切り替え出来て、さらに、デバイス別のスクリーンショットと、フルサイズのブラウザのスクリーンショットを撮ることが可能です。

この画面の上のほうの項目を少し操作します。

  1. 右上にあるタブの「要素」横のマークをクリックして、デバイスモードにする
  2. 必要なデバイスを選択
    (PC用であればiPad Proあたりを選択するときれいにできる)
  3. ドットマークのオプションボタンを押す
  4. フルサイズのスクリーンショットをキャプチャ
  5. 保存場所を聞かれるので、適当な場所に保存する(デバイス名.pngで保存されます)

Edgeの開発者ツールでスクリーンショットを撮る(ブラウザのフルサイズ可能)

Chromeだけかと思っていたら、いつの間にか、Edgeの開発者ツールにも搭載されていました。
使い方はChromeとほぼ同じです。

通常のブラウザ画面を右クリックして、表示される窓の下のほうにある開発者ツールで調査するを選択します。

  1. 右上にあるタブの「要素」横のマークをクリックして、デバイスモードにする
  2. 必要なデバイスを選択
    (PC用であればiPad Proあたりを選択するときれいにできる)
  3. ドットマークのオプションボタンを押す
  4. フルサイズのスクリーンショットをキャプチャ
  5. 保存場所を聞かれるので、適当な場所に保存する(デバイス名.pngで保存されます)

EdgeのWebキャプチャでスクリーンショットを撮る(フルサイズ+メモできる)

EdgeにWebキャプチャというメニューがあって、これだと範囲を選択して保存もできるし、メモもできる。実に画期的。


Webキャプチャを選択すると、エリアキャプチャか、ページ全体か尋ねられるので、フルスクリーンが欲しいなら、ページ全体を選ぶ。

※右クリックでもできるようになりました

すると、キャプチャ画面になり、手書きでメモも書けるようになる。もちろん消しゴムツールで消せる。(手書きなので汚い字でスイマセン…)

右の保存ボタンを押すと、PCのダウンロードフォルダに保存も可能。
日付-ウェブサイト名.jpegで保存される。