chromeのエクステンションを使わないでウェブページ全体をスクリーンショットでとる方法

chromeのエクステンションを使わないでウェブページ全体をスクリーンショットでとる方法

  • 2018-08-05  最終更新日:2018-08-05

さて今回はchromeブラウザ限定ですがエクステンションを使わずにページ全体と部分キャプチャをする方法をご紹介します。

割とエクステンションで処理しちゃう場合がありますがデフォルトで使えるという点では簡単に使えて違う環境の方にも勧めやすいです。デベロッパーツールを立ち上げることから始まります。

ブラウザの縦3つの点アイコン(設定)からその他ツール-デベロッパーツールを開きます。(Option + Command + I [Ctrl + Shift + I ])


スポンサーリンク


キャプチャ方法

chrome

デベロッパーツールが立ち上がったらCommand + Shift + P(Ctrl + Shift + P)を押すと詳細設定が出てくるのでfullと入力すると Capture full size screenshotというのがが出てくるのでそれを押すとページ全体がキャプチャされます。

javascriptなどで遅延ページロードなどしている場合は全部を読み込ませてからキャプチャするとうまくいきますがスライドショーなどではうまくいかない場合もあります。

画面全体の場合は詳細設定でscと入力すればCapture screenshotとでてくるので選択してやるとダウンロードが始まります。

モバイルキャプチャ方法

chrome

こちらもデベロッパーツールでモバイル設定した状態で右上の設定画面からCapture full size screenshotを選択するとダウンロードが始まります。

部分選択

chrome

特定の場所だけ選択してキャプチャしたい場合もあるかと思います。上記同様にデペロッパーツールからCommand + Shift + C(Ctrl + Shift + C )で要素検証モード(Select an element in the page to inspect it)の状態にしてからCommand(Ctrl)を押しながらキャプチャしたい範囲をマウスでドラッグして選択します。その範囲がキャプチャされてダウンロードされます。

簡単ですね。不要なエクステンションは減らした方がクロームには良いかもしれません。

参考になれば幸いです。


∞Tadashi Suyama∞

chrome キャプチャ ページ全体 full capture
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

アイキャッチ
HomebrewでMySQL8をインストールした時の問題点

さて、今回はお手軽にMySQL8をインストールしたときの問題点などをご紹介します。MacOS用パッケージマネージャーHomebrewを使ってインストール、そしてphpからアクセスしたときの問題点...

13 Feb 2019

アイキャッチ
ローカル環境を外部アクセス可能にする方法

さて、今回はお手軽テストサーバ構築のお助けngrok (エングロック)をご紹介します。どういうサービスかといいますと自分のローカル環境を外部アクセスで確認できるサービスになります。 本来は自分...

04 Feb 2019

アイキャッチ
複数のwebサービスを一元管理するアプリStationのご紹介

さて今回はwebサービスの一元管理アプリのご紹介です。よく使うサービスをまとめて管理できるアプリです。 以前[Franz](https://its-office.jp/blog/app/201...

22 Jan 2019

アイキャッチ
島根県安来市の清水寺の展望台は絶景スポット

先日清水寺にお参りに行って参りましたが春にはとても良いスポットがありましたのでご紹介します。山の上になるのですが見渡せる場所はどちらかといえば弓ヶ浜半島、米子市の方面を一望できます。王子製紙の場...

21 Jan 2019

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ