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

できるネット

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

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

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

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

06:00 2018年8月13日 公開

    【知ってた? 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に表示される「保護されていません」警告の意味は?

      • 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
      • できる楽器シリーズ
      新着記事
      • 【知ってた? Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法(拡張機能も不要!)
      • PowerPointで文字を1つずつアニメーションさせる方法
      • Google画像検索で色やサイズなどの条件を指定して検索する方法
      • PowerPointで箇条書きの一部分だけにアニメーションを設定する方法
      • お盆の渋滞予測、駐車位置の記録、外環道の開通にも対応!「Yahoo!カーナビ」は車載ナビがあっても便利に使える

      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.