Microsoft Edge, Google Chrome でスマートフォン表示エミュレーション ページのスクリーンキャプチャを撮影する手順を紹介します。
Microsoft EdgeでWebページを開いて表示します。
ツールバーの右上の[...]ボタンをクリックします。ドロップダウンメニューが表示されます。
[その他のツール]サブメニューの[開発者ツール]の項目をクリックします。または[F12]キーを押下します。
開発者ツールのウィンドウが表示されます。下図の例ではウィンドウの右側に表示されています。
開発者ツールのウィンドウ上部のツールバーの[デバイス エミュレーションの切り替え]ボタンをクリックします。
ページの表示がデバイスエミュレーションのモードになります。
ウィンドウ上部のツールバーのドロップダウンボックスをクリックします。デバイスの一覧が表示されますので、
エミュレーションしたいデバイスを選択します。今回は、"iPhone 12 Pro"の項目をクリックして選択します。
iPhone 12 Proのエミュレーション表示になります。
ウィンドウ上部のツールバーの右側の[▼]ボタンをクリックします。下図のドロップダウンメニューが表示されます。
[フル サイズのスクリーンショットをキャプチャする]の項目をクリックします。
ページのスクリーンキャプチャが撮影され、ファイルがダウンロードフォルダに作成されます。
作成されたファイルを画像ビューワーで表示します。ページ全体のスクリーンキャプチャが撮影できています。
Google ChromeでWebページを開いて表示します。
ウィンドウ上部の[...]ボタンをクリックします。ドロップダウンメニューが表示されますので、[その他のツール]サブメニューの
[デベロッパーツール]の項目をクリックします。または[F12]キーを押下します。
デベロッパーツールのウィンドウが表示されます。下図の例ではウィンドウの右側に表示されています。
開発者ツールのウィンドウ上部のツールバーの[デバイスのツールバーを切り替え]ボタンをクリックします。
ページの表示がデバイスエミュレーションのモードになります。
ウィンドウ上部のツールバーのドロップダウンボックスをクリックします。デバイスの一覧が表示されますので、
エミュレーションしたいデバイスを選択します。今回は、"iPhone 12 Pro"の項目をクリックして選択します。
表示がiPhone 12 Proのエミュレーション表示に切り替わります。
ウィンドウ上部のツールバーの右側の[▼]ボタンをクリックします。下図のドロップダウンメニューが表示されます。
[Capture full size screenshot]の項目をクリックします。
ページのスクリーンキャプチャが撮影され、ファイルがダウンロードフォルダに作成されます。
作成されたファイルを画像ビューワーで表示します。ページ全体のスクリーンキャプチャが撮影できています。
スマートフォン表示エミュレーション ページのスクリーンキャプチャを撮影できました。
