PC & スマホアプリの使い方なら

できるネット

  • Twitter をフォロー
  • Facebook ページをいいね
  • Google+ ページをフォロー
  • RSS フィードで購読
  • このサイトについて
サイト内検索

急上昇ワードホームセキュリティ Gmail iOS 11

  • PC & スマホアプリの使い方なら | できるネット
  • Google
  • Chrome
  • 【知ってた? Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法(拡張機能も不要!)
  • Chrome
  • Google

【知ってた? Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法(拡張機能も不要!)

06:00 2018年8月13日 公開

  • Chrome
  • Chrome拡張
  • スクリーンショット
【知ってた? Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法(拡張機能も不要!)

縦に長いWebページのスクリーンショットをChromeブラウザーだけで撮る方法を解説します。Chromeに拡張機能をインストールする必要もないので、手軽で簡単なChrome便利技です。

拡張機能を使わずに縦長ページのスクショが取れる!

Webページのスクリーンショット(画面キャプチャー、スクショ)を撮る際に、ブラウザーの画面上に表示されている部分だけでなく、スクロールした先も含めたページ全体を撮りたいことがあります。今回は、そんなときに便利なテクニックを紹介します。

Chromeブラウザー(クロームブラウザー)に搭載されている開発者向けの「デベロッパーツール」を使えば、ページ全体のスクリーンショットを撮影することが可能です。この方法なら、新たにChromeブラウザーに拡張機能をインストールする必要もありません。Chromeブラウザーだけで、縦に長いWebページ全体のスクリーンショットを撮影できます。

ここでは例として、Amazonの商品ページ(縦に長い!)全体のスクリーンショットを撮ってみます。Chromeブラウザーの便利なTipsなので覚えておいて損はありません。ぜひ一度、お試しください。

長いウェブページのフルスクリーンキャプチャーを撮る方法

1Chromeのデベロッパーツールを表示する

Chrome(クローム)ブラウザーでデベロッパーツールを起動する画面

フルスクリーンキャプチャーを撮りたいWebページを表示した状態で、画面右上にある[Google Chromeの設定]アイコン→[その他のツール]→[デベロッパーツール]の順にクリックします。

2Chromeのデベロッパーツールが表示された

Chrome(クローム)ブラウザーでデベロッパーツールが表示された画面

デベロッパーツールが表示されたら、[toggle device toolbar]アイコンをクリックします(1)。すると画面の上部にWebページを表示するブラウザーの種類やサイズが表示されるので、必要に応じて変更も可能です(2)。

3スクリーンショットを撮る

Chrome(クローム)ブラウザーのデベロッパーツールでスクリーンショットを取る画面

デベロッパーツールの右上にある[More options]アイコン→[Capture full size screenshot]の順にクリックして、フルサイズのスクリーンショットを撮りますが表示されたら、[toggle device toolbar]をクリックします(1)。すると画面の上部にWebページを表示するブラウザーの種類やサイズが表示されるので、必要に応じて変更も可能です。

4スクリーンショットが保存された

Chrome(クローム)ブラウザーのデベロッパーツールで取ったスクリーンショットがダウンロードされた(保存された)画面

スクリーンショットがダウンロードされました。ダウンロードされたファイルをクリックして確認してみましょう。

5スクリーンショットが表示された

Chrome(クローム)ブラウザーで取ったスクリーンショットが表示された画面

ダウンロードされたスクリーンショットが表示されました。縦に長いWebページのスクリーンショットがきちんと撮られていることが確認できます。

HINT端末の種類や画面サイズも設定できる

Chromeブラウザーのデベロッパーツールでは、パソコンだけでなく各種スマートフォンなどのWebブラウザーでWebページを表示した状態を確認できます。画面の上部で端末名や画面サイズを設定すれば、その状態でスクリーンショットを撮ることも可能です。

Chrome(クローム)ブラウザーのデベロッパーツールでiPhone Xの表示にした画面

画面上部で表示端末や画面サイズを設定できます。ここではiPhone Xでの表示にしてみました。この状態でスクリーンショットを撮れば、iPhone Xで表示した状態のスクリーンショットを保存できます。

Chrome(クローム)ブラウザーのデベロッパーツールでiPhone Xの表示で取ったスクリーンショット

スマートフォンで表示した縦に長いWebページのスクリーンショットを保存できました。

前の記事【セキュリティ】Google Chromeに表示される「保護されていません」警告の意味は?

  • Chrome
  • Chrome拡張
  • スクリーンショット
  • Google
  • Chrome
  • Twitterでシェア
  • Facebookでシェア
  • Lineで送る

この記事が気に入ったら
いいね!しよう

できるネットから最新の記事をお届けします。

オススメの記事一覧
同じカテゴリーの記事一覧
  • 【セキュリティ】Google Chromeに表示される「保護されていません」警告の意味は?
  • 【Chrome】メールアドレスのリンクからGmailを開く方法。ワンクリックで新規メールを作成できる!
  • 【Chrome裏ワザ】あの「恐竜ゲーム」がオンラインでも遊べるの知ってた?
  • 新デザインのGmailが「オフライン」対応。最新版Chromeで設定しよう
  • 【もう使ってる?】検索結果を"画像"で表示! Chrome拡張機能「Search Preview」の使い方
カテゴリーで使い方を探す
カテゴリーで使い方を探す
  • トップページ
  • Apple/Mac/iOS
    • iPhone最近アップデートされたカテゴリー
    • Apple Music
    • Apple Watch
    • iPad
    • iPod touch
    • Apple TV
    • iMovie
    • iPhoto
    • Mac
    • iTunes
    • その他(Apple)
  • Windows/Office
    • Windows 10最近アップデートされたカテゴリー
    • Word
    • Excel最近アップデートされたカテゴリー
    • Excel関数最近アップデートされたカテゴリー
    • PowerPoint
    • Access最近アップデートされたカテゴリー
    • OneNote
    • OneDrive
    • Office
    • Windows 8.1/8
    • Windows 7
    • XPサポート終了
    • その他(Windows/Office)
  • サービス/ソフト
    • マインクラフト
    • プログラミング
    • YouTube
    • Facebook
    • Instagram(インスタグラム)
    • Pokémon GO(ポケモンGO)
    • Amazon
    • LINE
    • giftel(ギフテル)
    • Spotify(スポティファイ)
    • Webサイト/Webサービス
    • 動画配信サービス
    • Dropbox
    • Evernote
    • ショートカットキー
    • note(note.mu)
    • PDF
    • GANREF
    • クラウド
    • Firefox
    • iKnow!
    • Rosetta Stone
    • RSSリーダー
    • Twitter
    • Ustream
    • 検索
    • サイボウズLive
    • セカンドライフ
    • 年賀状
    • はてなブックマーク
    • ブログパーツ
    • 今週の小ワザ
    • その他(サービス/ソフト)
  • Google
    • Android最近アップデートされたカテゴリー
    • Google Playミュージック
    • Googleフォト
    • Googleカレンダー
    • Chrome
    • Inbox by Gmail
    • Ingress(イングレス)
    • Gmail
    • Googleマップ
    • Googleドライブ
    • Google検索
    • その他(Google)
    • Google ToDoリスト
  • サイト制作・運営
    • Webマーケティング最近新しい記事が追加されたカテゴリー
    • ヒートマップツール
    • HTML
    • CSS
    • WordPress(ワードプレス)
    • Googleアナリティクス
    • Googleタグマネージャ
    • Google AdSense
  • デバイス
    • HOME ALSOK
    • ホームセキュリティ最近新しい記事が追加されたカテゴリー
    • スマートスピーカー
    • Amazon Echo
    • 子供GPS
    • まもるっく
    • 格安スマホ、格安SIM
    • GoPro
    • dynabook
    • Chromecast
    • USBメモリー
    • Touch Diamond
    • Pocket WiFi
    • BlackBerry
    • VAIO最近アップデートされたカテゴリー
    • ミニノートPC
    • その他(デバイス)
  • Android
    • GALAXY
    • LG(G2、Optimus)
    • MEDIAS
    • LifeTouch NOTE
    • Sony Tablet S
    • Androidアプリ・活用術
    • その他(Android)
  • 通信事業者
    • NTTドコモ
    • au
    • ソフトバンク
  • 読み物
    • マネー
    • マインドフルネス
    • 神保町ペロリ旅
    • 編集部からのお知らせ
    • できるもんの部屋
    • インタビュー
    • トピック
    • まとめ
    • その他(読み物)
人気記事
  1. 【素朴なギモン】Amazonプライム・ビデオに追加された映画はどうすればわかるの?
  2. Excel関数一覧 機能別
  3. 【定番アプリ】Android版「モバイルSuica」の会員登録→オートチャージ設定まで(手順を詳しく解説)
  4. 次の電車は何分何秒後? 「通勤タイマー」で朝夕の時間を有効活用しよう
  5. 【Google画像検索】超便利!スマホで「この画像と似た画像」を検索する方法
Pick Up
  • 子どもGPS
  • できる楽器シリーズ
新着記事
  • PowerPointで、文字を大きく強調するアニメーションを作る方法
  • 【知ってた? Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法(拡張機能も不要!)
  • PowerPointで文字を1つずつアニメーションさせる方法
  • Google画像検索で色やサイズなどの条件を指定して検索する方法
  • PowerPointで箇条書きの一部分だけにアニメーションを設定する方法

Twitterで @dekirunet をフォローする

ページ上部へ

Pick Up
  • 子どもGPS
  • できる楽器シリーズ
フォロー
  • RSSフィードで購読
  • Twitterでフォロー
  • Facebookでフォロー
できるシリーズ
  • できるシリーズについて
  • 読者限定PDFのダウンロード
  • サンプルファイルのダウンロード
できるネット
  • このサイトについて
  • 本サイトのご利用について
  • 全記事一覧
  • プライバシーについて
  • 会社概要
  • インプレスグループ
インプレスの本、雑誌と関連Webサービス
  • DOS/V POWER REPORT
  • GANREF
  • できるネット
  • 年賀状Web
  • Web徹底攻略
  • Reader's Forum
  • インプレス

Copyright ©2018 Impress Corporation. All rights reserved.