ホームkeyboard_double_arrow_rightナレッジブログkeyboard_double_arrow_rightGoogle Chrome で拡張機能に頼らず全画面のキレイなスクリーンショットを撮る方法

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

1shiharat
  • その他
公開: 2017.07.05 更新: 2022.01.17

どうも!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 で 全画面のスクショが簡単にとれるか試してみたいです!

以上、現場からでした!

制作の流れについて
  • 制作の流れ
  • 制作フェーズ
  • 運⽤フェーズ
  • お問い合わせ
  • 会社概要
GrowGroupの会社概要をはじめ、
成功事例などをご紹介しています。
  • 会社概要
  • 制作実績
  • 事業コンセプト
  • 会社概要
見積もりを依頼する見積もりを依頼する
顧客の課題解決を行い、成果を上げたGrowGroupの成功事例
GrowGroupは、ただただ制作するだけではありません。ご依頼の背景、⽬的からWebサイトの⽅向性を⾒極め「⽬的の達成」を第⼀に制作しています。

著者情報
Webエンジニア
1shiharat

何かいい本教えてください


弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています弊社エンジニアが執筆したWordPress標準デザイン講座が出版されています
メルマガ登録に登録するメルマガ登録に登録する