Webの記録

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

投稿日:2012年11月14日 更新日:

この記事は約 5 分で読めます。

pc_cheack

Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。

特にWebサイト1ページ全体の時は、フリーソフトを入れたり・・・部分的にとったスクリーンショット(キャプチャー)のツギハギをしたり・・・面倒な事をしてました。

今回は、Webサイトのスクリーンショット(キャプチャー)をとる時の方法を3つメモします。
WindowsとMacのショートカット。
そしてChrome拡張「Screen Capture」を使った方法を試してみます。

特にChrome拡張「Screen Capture」がとても便利でしたので、ここは忘れないようにメモです!

【2014.9.1追記】Chrome・Firefox・Safariエクステンションの「Awesome Screenshot」が閲覧したURLをどこかに送信しているらしいので、利用を控えた方が安心かも?!

目次

  1. Windowsで画面のスクリーンショット(キャプチャー)をとる方法
  2. Macで画面のスクリーンショット(キャプチャー)をとる方法
  3. Chrome拡張「Screen Capture」でスクリーンショット(キャプチャー)をとる方法
  4. Chromeエクステンションの「Awesome Screenshot」でスクリーンショット(キャプチャー)をとる方法

1.Windowsで画面のスクリーンショット(キャプチャー)をとる方法

  • 画面全体のキャプチャーをとる・・・「PrintScreen」
  • 特定のウインドだけのキャプチャーをとる・・・「Alt」+「PrintScreen」

2.Macで画面のスクリーンショット(キャプチャー)をとる方法

  • 画面全体のキャプチャーをとる・・・「Command」+「Shift」+「3」
  • 選択範囲だけのキャプチャーをとる・・・「Command」+「Shift」+「4」

3.Chrome拡張「Screen Capture」でスクリーンショット(キャプチャー)をとる方法

Chromeウェブストア」で「Screen Capture」をダウンロードします。

ブラウザの右上に青いアイコンが1つ増えています。これをクリックすると5つのメニューが出てきます。
うち上4つで画面のスクリーンショット(キャプチャー)をとる事ができ、一番下は設定の変更ができます。

各メニューの説明
  • Capture Page Region(Ctrl + Alt + R) ・・・Webページ内の好きな部分を選択範囲のみ。
  • Capture Visible Content(Ctrl + Alt + V) ・・・Webページの表示されている範囲のみ。
  • Capture Whole Page(Ctrl + Alt + H) ・・・Webページの表示されていない部分を含めた全体。
  • Capture Screen Region(Ctrl + Alt + P) ・・・ ブラウザのタブも含めた画面の中で選択範囲のみ。
  • Options ・・・ オプションを表示。保存するフォーマット(PNG / JPG)の選択、保存フォルダの選択、ショートカットキーの変更ができます。

上記のおおまかな説明の分だけで、結構使えます!
まだ細かい設定がいろいろ出来るので、これを好みでいじってみるととても便利なツールになると思います。

4.Chromeエクステンションの「Awesome Screenshot」でスクリーンショット(キャプチャー)をとる方法【※一番下の注意箇所もご覧ください】

以前はChrome拡張「Screen Capture」を使っていましたが、時々クラッシュするようになってきたので別のものを探していました。

最近になって、かちびと.netさまの「スクリーンショットを撮るChromeエクステンションはAwesome Screenshotが一番良かった」を参考に、試してみるとホントに使いやすかったのでココにメモします。

Awesome Screenshot」をChromeウェブストアでダウンロードします。

するとブラウザ右上に以下の画像のようなアイコンが1つ増えています。

Awesome-Screenshot1
これをキャプチャーをとりたいサイトを開いた状態でクリックすると、以下の画像のようにキャプチャーの仕方を選べます。
Awesome-Screenshot

Webページ1ページまるごと全体のキャプチャーがすんなりととれるのは、ホントに有難いです!

使い方や細かい情報は、以下で確認ください。

【2014.9.1 注意】「Awesome Screenshot」が閲覧したURLをどこかに送信しているらしいという情報がありました。とても便利なツールですが、URLを他人に見られては困る方は利用を控えた方が安心です。
念のため参考ブログをリンクします!
【参考】AWESOME SCREENSHOT が閲覧したサイトのURLを収集している疑い|秋元@サイボウズラボ・プログラマー・ブログさま

-Webの記録
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPressのバージョンを消す方法。

この記事は約 1 分で読めます。 WordPressのバージョンによってはセキュリティー的に脆弱性があるようで、いろいろネット検索をしていると表示を消した方が良いと出て来たので消してみたいと思います。 …

no image

WordPressでオリジナルテーマ作りにチャレンジ4【index.php編】

この記事は約 2 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「index.php」の部分を作りたいと思います。 前回までに1つのhtmlを「header. …

no image

s3Slider.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も、画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 今回チャレンジしてみたのは、「s3Slider.js」を使ったFlashのよ …

no image

slideshow.jsを使って画像のスライドショーにチャレンジ。 

この記事は約 1 分で読めます。画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 たくさん方法があると思うので、いくつか試してみるつもりです。 まず今回は、「slid …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。