生活

【Chrome】拡張機能なしでページ全体のスクリーンショットを取る方法

Chrome 拡張機能なし ページ全体 スクリーンショット 取る方法

みなさんはChromeの検証機能(デベロッパーツール)をご存知でしょうか?

主にウェブ開発やウェブデザインで使われる場面が多い機能ですが、実はこの機能で使うことで、拡張機能なしでページ全体のスクリーンショット(キャプチャー)を取ることができるんです

今は便利な拡張機能が多いので、それでいいのでは?と思われる方もいると思いますが、
拡張機能を入れすぎているとChromeが重くなる原因に繋がります

必要最低限の拡張機能だけを入れとくとブラウジングも快適!

コピペ
【作業効率UP】URLと記事タイトルを同時に取得してコピペできる『Create Link』の使い方 ブログを書いていて最近面倒だと感じたのは、参照したリンクを記事内に入れるのに、URLと記事タイトルそれぞれコピーしないと...

今回紹介するデベロッパーツールのスクリーンショット機能は、誰でも簡単にできるので覚えておいて損なしです

  • Chromeでスクリーンショットをとりたい
  • 拡張機能なしでページ全体のスクリーンショットを取りたい

画面キャプチャー方法(全4種類)

キャプチャー

デベロッパーツールには4種類のキャプチャー方法が用意されています▼

4種類のキャプチャー

上から説明していきます

  1. Capture screenshot
    表示中画面のキャプチャー
  2. Capture area screenshot
    範囲選択をしてキャプチャー
  3. Capture full size screenshot
    全画面キャプチャー
  4. Capture node screenshot (中級者向け)
    HTML要素を選んでキャプチャー

表示中画面のキャプチャー

①デベロッパーツールを開く

  • Windowsの場合
    ctrl+shift+i
    またはF12
  • Macの場合
    command+option+i
    またはfn+F12

右クリックの検証でも開けます

②コマンドメニューを開く

  • Windowsの場合
    ctrl+shift+p
  • Macの場合
    command+shift+p

③画面をキャプチャー

capと入力すると候補がでてくるので

Capture screenshot

をクリック

これでキャプチャー完了です

表示中画面のキャプチャー

範囲選択をしてキャプチャー

①デベロッパーツールを開く

  • Windowsの場合
    ctrl+shift+i
    またはF12
  • Macの場合
    command+option+i
    またはfn+F12

右クリックの検証でも開けます

②コマンドメニューを開く

  • Windowsの場合
    ctrl+shift+p
  • Macの場合
    command+shift+p

③ページ全体のキャプチャー

capと入力すると候補がでてくるので

Capture area screenshot

をクリック

キャプチャーしたい範囲を選択(クリックしてから離すまで)
これでキャプチャー完了です

範囲選択をしたキャプチャー

画面全体のキャプチャー

①デベロッパーツールを開く

  • Windowsの場合
    ctrl+shift+i
    またはF12
  • Macの場合
    command+option+i
    またはfn+F12

右クリックの検証でも開けます

②コマンドメニューを開く

  • Windowsの場合
    ctrl+shift+p
  • Macの場合
    command+shift+p

③画面をキャプチャー

capと入力すると候補がでてくるので

Capture full size screenshot

をクリック

これでキャプチャー完了です

ページ全体のキャプチャー

HTML要素を選んでキャプチャー(中級者向け)

中級者向けと書きましたが簡単です!

①デベロッパーツールを開く

  • Windowsの場合
    ctrl+shift+i
    またはF12
  • Macの場合
    command+option+i
    またはfn+F12

右クリックの検証でも開けます

②キャプチャーしたいHTML要素の選択

デベロッパーツールの上部にあるElementsをクリック
Web画面と比較しながら、キャプチャーしたいHTML要素を選択

デベロッパーツールのElements

③コマンドメニューを開く

  • Windowsの場合
    ctrl+shift+p
  • Macの場合
    command+shift+p

④画面をキャプチャー

capと入力すると候補がでてくるので

Capture node screenshot

をクリック

これでキャプチャー完了です

HTML要素を選択したキャプチャー

おまけ(モバイル表示の画面をキャプチャー)

モバイル表示

デベロッパーツール上部のElementsの左にある端末アイコンをクリックすると、モバイル表示の画面に切り替えることが可能です。画面サイズも自由に変更できます

デベロッパーツールの端末アイコン

PCからわざざわモバイル表示のスクリーンショットをとる人は少ないと思いますが、ちょっとしたときに使えます

今回は、Chromeのデベッロパーツールの機能を使うことで拡張機能なしでページ全体のスクリーンショット(キャプチャー)を取る方法をご紹介しましたがいかがだったでしょうか

デベロッパーツールの使い方を覚えておくと、役に立つ場面が多いので書籍などで学習するのがおすすめです▼

Chrome Developer Tools 入門(技術の泉シリーズ)インプレスR&D三省堂書店オンデマンド

他にも便利な拡張機能などについても紹介していきます!



合わせて読みたい