Web

Chrome で拡張機能を使わずにスクリーンショットを撮る方法

投稿日:2021年2月10日 更新日:

1. はじめに

Chrome ブラウザには、ブラウザウィンドウ上のスクリーンショットを撮る機能が組み込まれています。拡張機能を入れる必要はありません。

2. Chrome でスクリーンショットを撮る

Chrome の持っているスクリーンショット機能を使う手順は以下になります。

(1) デベロッパー ツールを開く

右上のメニューから [その他のツール] – [デベロッパー ツール] を選択するか、Ctrl + Shift + I キー(Macなら Command + Shift + I)を押して デベロッパー ツール (DevTools) を開きます。

(2) Command Menu を開く

Ctrl + Shift + P キー(Macなら Command + Shift + P)を押して、デベロッパー ツールの持つ Command Menu を開きます。

Command Menu(英語表示の場合)
Command Menu(日本語表示の場合)

デベロッパー ツールでは、Command Menu からいろいろなコマンドを実行することができます。

(3) スクリーンショットに関する機能の候補を表示する

Command Menu のところに “screen” もしくは “capture” といった文字列を入力すると、スクリーンショットに関するコマンド(機能)の候補が表示されます。

ここでは
ここでは “screen” と入力しています。
日本語表示の場合
日本語表示の場合

(4) スクリーンショット機能を選んで実行する

あとは、以下の選択肢のどれかを選択するとスクリーンショットのキャプチャが実行されます。

スクリーンショット機能 説明
Capture area screenshot
(領域のスクリーンショットをキャプチャする)
範囲を選択してスクリーンショットを撮る。
Capture full size screenshot
(フル サイズのスクリーンショットをキャプチャする)
スクロールしていない部分も含め、全範囲のスクリーンショットを撮る。
Capture node screenshot
(ノードのスクリーンショットをキャプチャする)
特定のノードの部分のスクリーンショットを撮る(予め [Element] パネル内でノードを選択しておく)。
Capture screenshot
(スクリーンショットのキャプチャ)
見えている範囲のスクリーンショットを撮る。

スクリーンショットのキャプチャが実行されると、その画像ファイルを保存するダイアログボックスが表示されます。

3. Chrome でスクリーンショットを撮る(簡易版)

手順の簡易版です。

  1. Ctrl + Shift + I(Mac:Command + Shift + I
  2. Ctrl + Shift + P(Mac:Command + Shift + P
  3. screen” と入力する
  4. 候補を選択する

※ Capture node screenshot の場合は、あらかじめ要素を選んでおく必要があります。

4. おわりに

操作が少し面倒ですが、余計な拡張機能もいりませんし便利だと思います。

特に「Capture full size screenshot」がありがたいです。

5. 参考

📂-Web

執筆者:labo


comment

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

関連記事

Web

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)について説明します。

Google

【Google】アカウント無効化管理ツールの設定

Google の「アカウント無効化管理ツール」について説明します。

Web

インターネット上の情報とテレビ・新聞の情報

「ワイドナ」ネタツイートを宮崎駿監督発言と紹介? (日刊スポーツ) – Yahoo!ニュース(https://headlines.yahoo.co.jp/hl?a=20170529-018 …

Web

テンプレートを使って無料でペラサイトが作成できる Strikingly

本ページでは、Strikingly というサービスを紹介します。 主に取り上げているのは 無料プラン です。 目次1. Strikingly とは?2. ウェブページの作成テンプレートを選ぶ雛形として …

Web

ウェブブラウザがページを取得して表示するまでの流れ

目次1. はじめに2. Chrome デベロッパーツールの [Network]パネル3. リソース毎の処理の流れ4. その後の流れ5. DOMContentLoaded と load イベント6. グ …