目次
Ctrl+Shift+M
ウェブブラウザ「Mozilla Firefox」（モジラ ファイヤーフォックス）で「Ctrl+Shift+M」のキーボードショートカットを実行すると「レスポンシブデザインモード」という機能を使用可能なようです。
レスポンシブデザインモード上では画面サイズの幅と高さを数値で指定して表示する事ができるようです。
スマートフォンの画面サイズをエミュレートする事が出来るのようなのでウェブサイト作成に便利そうです。
画面サイズ以外は完全に再現されるわけではありませんが大体の表示確認用に使用出来そうです。
エミュレート emulate の英語の意味をインターネットの辞書で調べてみると、コンピューター用語では、他のハードウェア、ソフトウェアの動作を模倣する事のようです。
ゲーム機関係でエミュレーターという言葉を聞いた事があるような気がしますが、似たようなものでしょうか。
Mozilla Firefox の バージョンは 119.0 (64 ビット) を使用しました。
サンプルページ
サンプルページとして以下の URL のページを準備してみました。当ブログの画像フォルダにアップロードした HTML ファイルです。悪意のある内容は含んでいません。
- responsive design mode
- https://pulogu.net/wordpress/wp-content/uploads/2023/11/responsive-design-mode.html
サンプルページは画面サイズを JavaScript で取得する内容になっています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>responsive design mode</title> <link rel="stylesheet" href="" type="text/css" media="all" /> <script type="text/javascript"> function test(){ let a=document.getElementById("h"); let b=document.getElementById("w"); a.textContent=window.innerHeight; b.textContent=window.innerWidth; } window.onload=test; window.onresize=test; </script> <style type="text/css"> body{ background-color:#ccc; } div{ font-size:24px; } </style> </head> <body> <h1>responsive design mode</h1> <div>window.innerHeight: <span id="h"></span>px</div> <div>window.innerWidth: <span id="w"></span>px</div> </body> </html>
表示テスト
上記サンプルページを普通に表示した時のスクリーンショットです。画面幅を正確に調整するのは難しそうです。
「Ctrl+SHift+M」キーでレスポンシブデザインモードで表示した時のスクリーンショットです。ウェブブラウザの画面の中で更に画面サイズが変更されています。
画面の表示サイズをピクセル px 単位で指定可能なようです。
Google Chrome の場合
Google Chrome （グーグル クローム）の場合は以下の手順で同じような機能を使用する事が出来るようです。
バージョンは 119.0.6045.106（Official Build） （64 ビット）です。
- 「Ctrl+Shift+I」で「デベロッパーツール」を起動
- 「Ctrl+Shift+M」で「Toggle device toolbar」を起動
Microsoft Edge の場合
Microsoft Edge（マイクロソフト エッジ）の場合は以下の手順で同じような機能を使用する事が出来るようです。
バージョンは 119.0.2151.44 (公式ビルド) (64 ビット) です。
- 「Ctrl+Shift+I」で「開発者ツール」を起動
- 「Ctrl+Shift+M」で「 デバイス エミュレーションの切り替え」を起動
テスト環境
- Windows 10（64 ビット）
以上、閲覧ありがとうございました。
