MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
Google Chrome で拡張機能に頼らず全画面のキレイなスクリーンショットを撮る方法

Google Chrome で拡張機能に頼らず全画面のキレイなスクリーンショットを撮る方法

公開日:2017年07月05日
最終更新日:2019年08月02日
オンスタ運営
その他
ツール
ホーム > 全記事一覧 > その他 > Google Chrome で拡張機能に頼らず全画面のキレイなスクリーンショットを撮る方法
このエントリーをはてなブックマークに追加
Google Chrome で拡張機能に頼らず全画面のキレイなスクリーンショットを撮る方法
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。
どうも!GrowGroupのエンジニアです!石原です! 今日は簡単にGoogle Chromeで拡張機能なしで全画面のスクリーンショットを撮る方法を、 スクリーンショットを交えながら説明します! 駆け足でいきますね!ついてきてください!

1.  デベロッパーツールを開く

mac OS だと Command + Shift + c キーでデベロッパーツールが開きます! Windows ですと Ctrl + Shift + c キーですね! デベロッパーツールを開くまではできる限りショートカットキーで開きましょう! 時短です! ※ 右上のメニューアイコンからも開けますよ!   Web開発者以外の人にとってはいきなり難易度高いかもしれないですが、続けますよ!

2. 端末表示に切り替え

デベロッパーツールのパネルの左上にある、スマートフォンとタブレットが並んでいるアイコンをクリックしますよ!   すると下のように表示が変わるので、スクリーンショットを取りたい端末サイズを選択してくださいね!  

3. Capture full size screenshot

続けて赤枠箇所の●が3つ並んでいるアイコンを秒でクリックしてください!   表示されたメニューの中の【Capture full size screenshot】をクリックすると.....       きれいにきれいに撮れております!!! ※クリックで拡大します 速くて正確に、position: fixed なんてものも問題なし! キレイに撮れています!

ex. 余談

ちなみに、【Show device frame】を選択後、 【Caputure screenshot】をクリックすると、 端末のフレームが適用された状態でスクリーンショットがダウンロードできますよ! ただしNexus と iPhone / iPad のみです! ※クリックで拡大します

まとめ

Google Chromeのスクリーンショットって案外面倒ですよね! バージョン59以上に限りますが便利に使えます!是非一度試してみてください! 時間があったら Headless Chrome で 全画面のスクショが簡単にとれるか試してみたいです! 以上、現場からでした!
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

【Google アナリティクスの使い方】おさらいということで基本用語、画面の見方や使い方、運用についてご紹介!
Webマーケティング
web担当者
ツール
公開日: 2019年10月14日
最終更新日: 2019年10月17日
【Google アナリティクスの使い方】おさらいということで基本用語、画面の見方や使い方、運用についてご紹介!
  • # Google Analytics
  • # アナリティクス
オンスタ運営
【リンクチェック含む】URLのリストが欲しい?そんな時は「Integrity」がオススメ!(Macユーザー限定)
ツール
公開日: 2019年09月24日
最終更新日: 2019年09月24日
【リンクチェック含む】URLのリストが欲しい?そんな時は「Integrity」がオススメ!(Macユーザー限定)
  • # Mac
  • # Web制作
  • # お役立ち
  • # ツール
  • # リンクチェック
オンスタ運営
ASPってなに?ASPサービスの概要とメリット、デメリットについて調査してみた
web担当者
エンジニア
ツール
ディレクター
制作
公開日: 2020年06月16日
最終更新日: 2020年06月11日
ASPってなに?ASPサービスの概要とメリット、デメリットについて調査してみた
  • # ASP
オンスタ運営
【初心者必見】webAPIって何?webAPIの仕組みについて概要をザックリまとめてみた
web担当者
エンジニア
ツール
ディレクター
制作
公開日: 2020年06月23日
最終更新日: 2020年06月11日
【初心者必見】webAPIって何?webAPIの仕組みについて概要をザックリまとめてみた
  • # webAPI
オンスタ運営
【web初心者必見】webサイトってどんな種類があるの?webサイトの種類に関してまとめてみた。
web担当者
ツール
制作
公開日: 2020年06月30日
最終更新日: 2020年06月29日
【web初心者必見】webサイトってどんな種類があるの?webサイトの種類に関してまとめてみた。
  • # webサイトの種類
オンスタ運営
【Gmail】Gmailが超便利!Gmailの便利機能をご紹介!
web担当者
ツール
公開日: 2020年01月15日
最終更新日: 2020年01月15日
【Gmail】Gmailが超便利!Gmailの便利機能をご紹介!
  • # Gmail
  • # Keep
  • # Todoリスト
  • # サブメールアドレス
オンスタ運営
取り扱いの難しいダウンロード素材などのライセンス周りについて調べてみた
web担当者
ツール
制作
広告
公開日: 2020年08月31日
最終更新日: 2020年07月21日
取り扱いの難しいダウンロード素材などのライセンス周りについて調べてみた
オンスタ運営
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
Webデザイン
web担当者
ツール
デザイナー
制作
公開日: 2019年11月06日
最終更新日: 2019年11月06日
Adobe XDに待望の新機能!共同編集機能がリリース!webデザイナーさん必見です!
  • # Adobe XD
  • # 共同編集
  • # 新機能
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。