本ページは広告リンクやPRが含まれます

【Chrome】縦に長いWEBページのスクリーンショットを作成する方法のご紹介

Chrome 備忘録
広告

Chromeで縦に長いWEBページのスクリーンショットを作成する方法を紹介しています。

Google Chromeを使っていて縦に長いWEBサイトをスクショしようと思い「印刷」でPDFにしようと試してみましたが一部を切り取ったPDFになってしまい、いろいろ調べて長いWEBページのスクリーンショットを作成できましたので備忘録としてまとまました。

Chromeで縦に長いWEBページのスクリーンショットを作成する方法

Chromeで縦に長いWEBページのスクリーンショットを作成する方法を2つ見つけました。

Chromeのデベロッパーツールでスクリーンショットを作成

Chromeの標準機能である「デベロッパーツール」を使って縦に長いWEBページのスクリーンショットを作成する。

「Chorme」のウィンドウの右上の「・・・」をクリックします。開いてきたウィドウの「そのほかのツール 」⇒「デベロッパーツール」を選択します。
Chromeで縦に長いWEBページのスクリーンショット

「デベロッパーツール」のウィンドウの右上の「・・・」をクリックします。「Run Command」を選択します。
Chromeで縦に長いWEBページのスクリーンショット

Run>の後に「full」と入力し「Screenshot」をクリック。
Chromeで縦に長いWEBページのスクリーンショット

ダウンロードフォルダに「.jpg」のスリーンショット画像が保存されます。

マウスの右ボタンドラッグ移動で領域を選びスクリーンショットを作成する

Chromeの「デベロッパーツール」でスクリーンショットが作成できないWEBサイトもあります。
これは偶然見つけた方法なのですが、Chromeの「デベロッパーツール」でスクリーンショットが作成できないWEBサイトも複数ページのPDFを作成することが出来ます。

スクリーンショットを作成したい領域をマウスの右ボタンを押したままドラッグ移動して選びます。
Chromeで縦に長いWEBページのスクリーンショット

領域が決まったら選択されて色が変わっていない箇所でマウスの右ボタンを押す事を解除し、再度右ボタンをクリック。開いたウィンドウの「印刷」をクリック。
Chromeで縦に長いWEBページのスクリーンショット

選んだ領域の印刷プレビュー画面。
Chromeで縦に長いWEBページのスクリーンショット

コメント

タイトルとURLをコピーしました