Chrome_全体スクショ2_アイキャッチ

【縦長OK】ChromeでWebページ全体をスクリーンショットする方法を解説【拡張機能は不要】

こんにちは、ミウラアケミ(@akmnred)です。

Webページの全体スクリーンショットを撮りたい時ってありますよね。

Web制作をしている方なら割と頻繁にそういった場面に遭遇するんじゃないかなと思います。

しかし、例えばディスプレイの表示領域に収まらない縦長ページの場合だと、スクリーンショットを数回に分けて撮らなければいけないと思っていませんか?

あるいは、全体スクリーンショットを撮るためだけに拡張機能や専用ソフトをインストールしていないですか?

実はChromeの標準機能を使えば、下記の要望を一瞬で解決できるんです!!

  • Chromeで縦長Webページの全体スクリーンショットを撮りたい
  • 拡張機能をインストールするのは面倒だ…標準機能だけでスクショできないの?
  • モバイル用レイアウトの全体スクリーンショットも欲しい

あまり一般的には知られていない方法かもしれませんが、カンタンなので覚えていて損はないですよ。

Chromeの検証ツールを使う

Chromeには検証というツールが標準で備わっているのをご存知でしょうか?

Chromeに限らず、FirefoxやInternet Explorerにも同じようなツールが標準で備わっています。

一般的には馴染みのないものかもですが、Web制作に携わる人間にとっては必須のデバッグツールです。

今回はこの検証ツールを使って、縦長Webページのスクリーンショットを撮る方法を解説していきますね。

検証ツールを起動する

では早速ですが検証ツールを起動しましょう。(下記のショートカットキーで起動できます。)

Mac:Cmd+option+i

Windows:F12またはCtrl+Shift+i

検証ツール

上記のようなウィンドウが表示されていればOKです。

ショートカットキーが上手くいかない場合は、Webページ上で右クリック検証で、検証ツールが表示されます。

また、右上のメニューからその他のツールデベロッパー ツールでもOKです。

【縦長OK】全体スクリーンショットを撮る方法

検証ツールを表示した状態で、下記のショートカットキーを打ち込みます。

Mac:Cmd+shift+p

Windows:Ctrl+Shift+p

検証ツール_詳細入力フォーム

上記のような詳細を入力するフォームが表示されるので、ここに「full」と入力してください。

検証ツール_Capture_full_size_screenshot

すると「Capture full size screenshot」と表示されるので、これをクリックします。

縦長ページ_全体スクショ

縦長ページの全体スクリーンショット

はい、これだけで縦長でも問題なくページ全体のスクリーンショットが撮れました。

超絶カンタンですね。

ちなみスクショされた画像は、自動でデスクトップにダウンロードされます。

選択した範囲のみスクリーンショットを撮る方法

もちろん選択範囲のみを撮ることもできます。

その場合は全体スクショの時と同様の手順で、検証ツールを起動した状態で下記ショートカットキーを入力します。

Mac:Cmd+shift+p

Windows:Ctrl+Shift+p

詳細入力フォームに「area」と入力してください。

検証ツール_Capture_ area_screenshot

「Capture area screenshot」と表示されるので、これをクリックすると「+」アイコンが現れます。

あとはスクショしたい部分をドラッグして選択するだけです。

選択範囲のみスクショ

選択範囲のみスクショ

モバイル用レイアウトを表示しつつ、全体スクショが撮れます

Chromeの検証ツールの素晴らしい点として、超絶カンタンにモバイル用レイアウトを確認することができます。

まず検証ツールの左上にある、スマホとタブレットのアイコンをクリックします。

検証ツール_モバイル版レイアウトの確認方法

これで現在表示されているWebページのモバイル用レイアウトを確認することができます。

上記のスクショではデバイスがiPhone Xになっていますが、セレクトボックスをクリックすれば、他のデバイスのレイアウトも確認することができます。

検証ツール_レスポンシブサイズ変更

そしてこの状態で縦長ページと同様の手順を踏めば、モバイル用レイアウトの全体スクリーンショットも撮ることができます。

レスポンシブ_全体スクショ

モバイル用レイアウトの全体スクリーンショット(縦に長いため一部カット)

標準機能でここまでできるなんて本当に素晴らしいですね。

まとめ

当記事では下記のことについて解説してきました。

  • Chromeの検証ツールを使えば、縦長ページの全体スクリーンショットが撮れる
  • 拡張機能をインストールする必要なし
  • Webページをモバイル用レイアウトで表示しつつ、全体スクリーンショットを撮ることも可能

Google Chromeの検証ツールは多機能でとても便利なので、使いこなせるようになるといいですね。

関連記事

  1. イラレでオシャレな名刺を自作_アイキャッチ

    便利TIPS

    【コスパ最高】Illustratorで自作!オシャレな名刺の作り方【カンタン】

    名刺は業者に発注すると数万円かかりますが、自作すれば印刷代の1,000…

最近の記事

  1. 和泉リサイクル環境公園の菜の花
  2. 大阪駅
  3. 黒門市場
  4. 成長
  5. 【FTP不要】WordPressのサーバー移行はAll-in-One WP Migrationで決まり【10分で完了】のアイキャッチ

アーカイブ

PAGE TOP