WEB関係

ブラウザ(クローム)でのウェブサイトフルキャプチャ(スクショ)のやり方・撮り方

投稿日:

デザインを参考にしたいサイトがあったのでキャプチャしようとしたら結構面倒くさかったので備忘録。

ブラウザ(クローム)でのウェブサイトフルキャプチャ(スクショ)のやり方・撮り方

ちなみに通常、サイトの画像のスクリーンショット(キャプチャ)を取る場合は以下の通り。※Windows10の場合です。

PrintScreenボタン クリック パソコン画面全体をキャプチャ
ALT + PrintScreenボタン クリック 使用しているウィンドをキャプチャ クリック

※効かない場合はWindowsマーク + PrintScreen

しかし、筆者欲しいのは素敵サイト全体のスクリーンショット(サイト全体が長細く表示されているデータ)。これ、簡単にキャプチャ出来る方法ないのかなと思っていたのですがちょっと面倒だった。

サイト全体のキャプチャ方法その1:Chromeでデベロッパーツール開く

サイト全体のキャプチャが欲しい時は GoogleChrome からスクショしたい任意のサイトを開きます。
「F12キー」もしくは、「Ctrl + Shift + I」をクリックして画面右に「デベロッパーツール」を開きます。

screenshot_2

サイト全体のキャプチャ方法その2:検索ボックス表示

次にデベロッパーツールの機能選択をします。ショートカットキーもしくは、クリックして探していく。

  • ショートカットキーの場合:Ctrl + Shift + P
  • クリックして検索する場合は、デベロッパーツール右上の3つの点点マークをクリック → Runcommand 

screenshot_2

サイト全体のキャプチャ方法その3:「フルスクリーンショット」を検索

表示された検索ボックスに「Full」と入力。すると、「」が表示されるのでそのまま選択。サイト全体のスクリーンショット(pngデータ)がダウンロードされます。

screenshot_4

以上です。ちなみにChromeの拡張機能「FireShot」とかだと簡単にキャプチャ出来るらしい。
頻繁に使用しそうな方はそちらを使っても良いかもしれない。

まとめ

サイト全体のスクリーンショットの簡単手順は、以下なので覚えておこっと。

  1. F12キー
  2. Ctrl + Shift + P
  3. 「full」と入力

スポンサーリンク




スポンサーリンク




-WEB関係
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

illustrator_clipping-mask_3

【Illustrator】イラレ画像のクリッピングマスクのショートカットや出来ない場合考えられること

今回はIllustrator(イラレ)のクリッピングマスクがさくっと出来るショートカットやうまく出来ない時の対処法なんかを勝手に綴っていきます。 Contents1 Illustrator(イラレ)の …

【HTML】文字の修飾(色や大きさ等)を変更する方法

ECサイト等をいじっているときに時々あるのは、「※HTMLのみ使用可能」。 文字を大きくしたい・色を変えたい…今回はそんなHTMLのみで文字を修飾する方法を紹介していきます。 Contents1 HT …

ffftp

さくらサーバーでFFFTPを使う方法【WordPress】

ホストの設定名(T)今回はFTPソフト「FFFTP」を使ってさくらサーバーにアクセスする方法の備忘録。FTPソフト使うとWordPressとかのファイル転送とかダウンロードとかが簡単に出来るから好き。 …

wp_error

WPログイン画面でエラー(Cookieがブロック)が出る時の対策<SSLの設定にご注意を>

ある時、ログイン画面で下記のようなエラーがでてしまった。 「エラー: Cookie がブロックされているか、お使いのブラウザーで未対応のようです。WordPress を使うには Cookie を有効化 …

html_logo

!DOCTYPE htmlとは?読み方や意味・使い方【HTML】

サイトをいじっていると必ず出てくる!DOCTYPE html。今回はこれについての備忘録。 Contents1 !DOCTYPE htmlとは?2 !DOCTYPE html読み方3 !DOCTYPE …

背景画像

プロフィール画像

あさの まき

WEB関連の仕事をしている旅行と酒を愛してやまない女。 いい大人の雑記。

ツイッター

SPONSORED LINK