blob: 41c1b1a30c339765bc4433d5f4936f2c93698d5c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
---
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>
|
