目次
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 からいろいろなコマンドを実行することができます。
(3) スクリーンショットに関する機能の候補を表示する
Command Menu のところに “screen” もしくは “capture” といった文字列を入力すると、スクリーンショットに関するコマンド(機能)の候補が表示されます。
(4) スクリーンショット機能を選んで実行する
あとは、以下の選択肢のどれかを選択するとスクリーンショットのキャプチャが実行されます。
スクリーンショット機能 | 説明 |
---|---|
Capture area screenshot (領域のスクリーンショットをキャプチャする) |
範囲を選択してスクリーンショットを撮る。 |
Capture full size screenshot (フル サイズのスクリーンショットをキャプチャする) |
スクロールしていない部分も含め、全範囲のスクリーンショットを撮る。 |
Capture node screenshot (ノードのスクリーンショットをキャプチャする) |
特定のノードの部分のスクリーンショットを撮る(予め [Element] パネル内でノードを選択しておく)。 |
Capture screenshot (スクリーンショットのキャプチャ) |
見えている範囲のスクリーンショットを撮る。 |
スクリーンショットのキャプチャが実行されると、その画像ファイルを保存するダイアログボックスが表示されます。
3. Chrome でスクリーンショットを撮る(簡易版)
手順の簡易版です。
- Ctrl + Shift + I(Mac:Command + Shift + I)
- Ctrl + Shift + P(Mac:Command + Shift + P)
- “screen” と入力する
- 候補を選択する
※ Capture node screenshot の場合は、あらかじめ要素を選んでおく必要があります。
4. おわりに
操作が少し面倒ですが、余計な拡張機能もいりませんし便利だと思います。
特に「Capture full size screenshot」がありがたいです。
5. 参考
- What’s New In DevTools (Chrome 59) | Web | Google Developers(リンク切れ?)
- https://developers.google.com/web/updates/2017/04/devtools-release-notes#screenshots
- Full-page screenshots
- What’s New In DevTools (Chrome 62) | Web | Google Developers
- New screenshot workflows
- Screenshots of a portion of the viewport
- Screenshots of specific HTML nodes
- New screenshot workflows
- What’s New In DevTools (Chrome 74) | Web | Google Developers
- Capture area screenshot in the Command Menu