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

サイト内検索

最近の投稿

アイキャッチ
正規表現はじめの一歩

今回は正規表現です。たまにしか使わないのですぐに忘れてしまいますのでまとめておきます。 文字列の検索時にある条件にマッチしたものを表示させるものです。 エディターにも検索条件に正規表現という検...

07 Oct 2018

アイキャッチ
ワードプレス記事一括削除する方法

ワードプレスで記事を一括削除する方法が意外と簡単なことに気がつきました。記事を大量に削除する場合はあまりなかったのですが、調べてみたら簡単なことでした。 大量のデータをインポートする時に失敗し...

30 Sep 2018

アイキャッチ
メールはGmailに限る

大分間が空きました。。。さて今回はGmailをご紹介します。最近ではチャット系アプリが主流ですが、それでもやはりメールはなんだかんだで使います。いつも悩まされるのはスパムメールですが、Gmail...

25 Sep 2018

アイキャッチ
大山の大献灯・和傘灯りに行った感想

大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。 大...

23 Aug 2018

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

著者

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

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

フッターイメージ