Help us understand the problem. What is going on with this article?

Webページのスクリーンショットをとる。Macショートカット,Chromeデベロッパーツール(拡張機能なし)

よく質問されるので「ここ見てね」的なものとして作成。

対象環境

  • Mac
  • Google Chrome

※外部ツールやブラウザの拡張機能をなど利用せず、OSやブラウザの標準機能を利用する。

■お気軽にキャプチャをとる

Macにて、選択した範囲のキャプチャをとるショートカット。
ショートカットなので、サクサクとることができる。

選択範囲の画像をデスクトップに出力する

shift + command + 5
or
shift + command + 4

選択範囲の画像をクリップボードに出力する

shift + control + command + 4
※これは地味に便利。

その他ショートカットいろいろ

Mac でスクリーンショットを撮る方法(本家)

■さまざまなパターンのキャプチャをとる

Google Chromeのデベロッパーツールを利用したキャプチャのとりかた。

キャプチャをとる

Google Chromeを開き、キャプチャをとりたいページを開く。
その画面上で右クリック押下し、メニュー内の「検証」を押下。
それにより、デベロッパーツールが起動する。
img-1.png

赤枠のボタンを押下。
img-2.png

表示したいデバイスを選択する。
img-3-2.png

表示可能なデバイスはいろいろある。お好みで。
img-7.png
img-8.png

右上のボタン押下でメニューが表示される。
img-9.png

「Capture screenshot」押下で画面に表示されている領域のみ、キャプチャをとることができる。
img-4.png
img-4-2.png

「Capture full size screenshot」押下で、ページ全体のキャプチャをとることができる。
※画像は割愛

いろいろできる

デバイスフレームを表示する

「Show device frame」を押下すると、デバイスのフレームを表示することができる。
このままキャプチャをとれば、フレームも一緒に出力することができる。
img-6.png

こんなかんじ。
image.png

表示の向きを横にする

赤枠のボタンを押下することで、表示を横にすることが可能。
img-5.png

まとめ

キャプチャのとりかたはいろいろあるので、お好みでいろいろと試してみるといいかも。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした