---
title: スクリーンショットを撮影する
slug: Tools/Taking_screenshots
tags:
  - Tools
translation_of: Tools/Taking_screenshots
---
<div>{{ToolsSidebar}}</div>

<p>開発ツールを使用して、ページ全体またはページ内のひとつの要素のスクリーンショットを撮影できます。</p>

<h2 id="Taking_a_screenshot_of_the_page" name="Taking_a_screenshot_of_the_page">ページのスクリーンショットを撮影する</h2>

<p>現在のページ全体のスクリーンショットを撮影するには、スクリーンショットのアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14713/camera-icon.png" style="height: 16px; margin-bottom: -4px; width: 18px;">) を使用します。</p>

<p>デフォルトでは、スクリーンショットのアイコンが有効化されていません。有効にする方法は以下のとおりです:</p>

<ul>
 <li><a href="/ja/docs/Tools/Settings">オプション</a> ページを開きます。</li>
 <li>"利用可能なツールボックスのボタン" のセクションを探します。</li>
 <li>"ページ全体のスクリーンショットを撮影します" にチェックを入れます。</li>
</ul>

<p>以上で、ツールバーにアイコンが表示されます:</p>

<p>{{EmbedYouTube("KB5V9uJgcS4")}}</p>

<p>アイコンをクリックすると、現在のページのスクリーンショットを撮影します。スクリーンショットは、ブラウザーの "ダウンロード" ディレクトリーに保存します:</p>

<p>{{EmbedYouTube("HKS6MofdXVE")}}</p>

<h2 id="Taking_a_screenshot_of_an_element" name="Taking_a_screenshot_of_an_element">要素のスクリーンショットを撮影する</h2>

<p>ページ内のひとつの要素のスクリーンショットを撮影するには、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">インスペクターの HTML ペイン</a> でその要素のコンテキストメニューを開いて、"ノードのスクリーンショットを撮影" を選択します。スクリーンショットは、ブラウザーの "ダウンロード" ディレクトリーに保存します:</p>

<p>{{EmbedYouTube("p2pjF_BrE1o")}}</p>

<h2 id="Copying_screenshots_to_the_clipboard" name="Copying_screenshots_to_the_clipboard">スクリーンショットをクリップボードにコピーする</h2>

<p>Firefox 53 より、スクリーンショットをクリップボードにコピーすることもできます。開発ツールのオプションで "Screenshot to clipboard" にチェックを入れてください:</p>

<p>{{EmbedYouTube("AZedFGh6F78")}}</p>

<p>スクリーンショットを撮影すると、クリップボードへのコピーも行います。</p>

<p> </p>

<h2 id="アディショナルオプション">アディショナルオプション</h2>

<p>別のデバイスとピクセルの比率を指定する必要がある場合、スクリーンショットを撮る前に遅延を設定するか、独自のファイル名を指定する必要がある場合は、Web コンソールで <code>:screenshot</code> <a href="/ja/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">ヘルパー関数</a>を使用できます。</p>

<p> </p>