レスポンシブデザインモード

このページでは、Firefox 52 以降のバージョンのレスポンシブデザインモードについて説明します。これより前のバージョンの Firefox については、レスポンシブデザインモード (Firefox 52 より前) をご覧ください。

レスポンシブデザイン は、さまざまな端末、特にデスクトップやラップトップだけでなく携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。

もっとも明らかな要素は画面のサイズですが、ほかにもディスプレイの画素密度やタッチをサポートするかといった要素があります。レスポンシブデザインモードは、さまざまな端末でウェブサイトがどのように表示および動作するかを確認するために、これらの要素をシミュレーションする手段を提供します。

レスポンシブデザインモードを切り替える

レスポンシブデザインモードを切り替える方法は 3 つあります:

  • Firefox メニュー (メニューバーを表示している場合や OS X では [ツール] メニュー) の [ウェブ開発] サブメニューで [レスポンシブデザインモード] を選択します。
  • 開発ツールのツールボックスで、ツールバー の [レスポンシブデザインモード] ボタンを押します。
  • キーボードで Ctrl + Shift + M (OS X では Cmd + Opt + M) を押下します。

レスポンシブデザインモードを使用する

レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。

初期状態は 320 x 480 ピクセルです:

 

レスポンシブデザインモード自体の切り替えとは別に、開発ツールのツールボックスを表示または非表示にすることができます:

レスポンシブデザインモードを有効にした状態で、コンテンツ領域がリサイズされたまま通常どおりにブラウジングを続けることができます。

端末選択

ビューポートの上に [端末が選択されていません] と表示されています。ここをクリックすると、端末名の一覧が開きます。端末を選択すると、レスポンシブデザインモードは以下の特定を、その端末に合わせて設定します:

  • 画面のサイズ
  • 端末の画素密度 (端末の物理ピクセルと端末に依存しないピクセルの比率)
  • タッチイベントのシミュレーション

さらに Firefox は User-Agent HTTP リクエストヘッダーを、選択した端末の既定のブラウザーであると名乗るように設定します。例えば iPhone を選択すると、Firefox は自身が Safari であると名乗ります。navigator.userAgent プロパティも同じ値を設定します。

ドロップダウンリストにある端末は、選択可能な端末のサブセットです。ドロップダウンリストの末尾に [リストを編集...] という項目があります。これを選択するとすべての選択肢を含むパネルが表れて、ドロップダウンリストに表示したい端末を選択できます。端末一式や各端末に関連付けられている値は、https://github.com/mozilla/simulated-devices から取得できます。

独自の端末を定義することは、まだできません。

端末の制御

ほとんどの端末の特性について、特別な値を与えることもできます。

画面のサイズを設定する

画面のサイズを設定するには、ビューポートの下にある値をクリックして編集します:

ビューポートの右下の角をドラッグして、サイズを変更することもできます。

端末の画素密度を設定する

端末の画素密度を設定するには、[DPR] のリストボックスをクリックして希望する値を選択します。

タッチイベントのシミュレーションを切り替える

タッチイベントのシミュレーションを有効化/無効化するには、人差し指を立てている手のアイコンをクリックします:

タッチイベントのシミュレーションを有効化すると、マウスイベントを タッチイベント に変換します。

タッチイベントのシミュレーションを有効化すると、強制的にページを再読み込みします。これは、多くのページが読み込み時にタッチイベントのサポート状況を確認して、サポートしている場合に限りイベントハンドラを追加しているためです。

向きを切り替える

画面の向きをポートレートまたはランドスケープに切り替えるには、端末選択の隣にあるアイコンをクリックします:

ネットワークを調整する

とても高速なネットワーク接続を使用してすべての開発やテストを行っている場合は、低速な接続を使用してアクセスしたときにサイトで問題が発生するかもしれません。レスポンシブデザインモードで、さまざまな種類のネットワークの特徴をほぼエミュレートするようブラウザに指示できます。

以下の特徴をエミュレートします:

  • ダウンロード速度
  • アップロード速度
  • 最小の遅延

以下の表で各ネットワークに関連付けられた値を示しますが、正確なパフォーマンスを測定するためにこの機能を頼らないようにしてください。これは、さまざまな状況におけるユーザーエクスペリエンスのおおまかな見解を示そうとするものです。

選択肢 ダウンロード速度 アップロード速度 最小の遅延 (ms)
GPRS 50 KB/s 20 KB/s 500
Regular 2G 250 KB/s 50 KB/s 300
Good 2G 450 KB/s 150 KB/s 150
Regular 3G 750 KB/s 250 KB/s 100
Good 3G 1.5 MB/s 750 KB/s 40
Regular 4G/LTE 4 MB/s 3 MB/s 20
DSL 2 MB/s 1 MB/s 5
Wi-Fi 30 MB/s 15 MB/s 2

ネットワークを選択するには、初期値として [No throttling] と表示されているリストをクリックします:

スクリーンショットを取得する

カメラのアイコンをクリックすると、ビューポートのスクリーンショットを取得します:

スクリーンショットは、Firefox の既定のダウンロード先に保存します。

ドキュメントのタグと貢献者

 このページの貢献者: yyss, hamasaki, SatoshiOhata, Uemmra3, wbamberg
 最終更新者: yyss,