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

対象環境

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

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

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

shift + command + 5
or
shift + command + 4

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

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

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

表示したいデバイスを選択する。

表示可能なデバイスはいろいろある。お好みで。

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

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

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

こんなかんじ。

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

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