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

レスポンシブデザインは、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインモードは、Web サイトや Web アプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。

以下のスクリーンショットは Wikipedia のモバイル版を、コンテンツエリアのサイズが 320x480 の状態で表示した例です。

レスポンシブデザインモードは、コンテンツエリアのサイズをすばやくかつ正確に変更できるので便利です。

もちろん、ブラウザーのウィンドウサイズを変えることもできるでしょう。しかしブラウザーのウィンドウを小さくするとほかのタブもすべて小さくなってしまい、ブラウザーのインターフェイスが使用しづらくなります。

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

有効化と無効化

レスポンシブデザインモードの有効化方法は 3 つあります:

Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) の Web 開発サブメニューで "レスポンシブデザインビュー" を選択する
ツールボックスのツールバーで "レスポンシブデザインビュー" ボタンを押す
Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)

また、レスポンシブデザインモードを無効化する方法も 3 つあります:

"レスポンシブデザインビュー" メニュー項目を再度選択する
ウィンドウの左上隅にある "終了" ボタンをクリックする
Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)。Firefox 34 より前では、Esc キーでもレスポンシブデザインビューが閉じました。

コンテンツエリアのサイズを変更する方法は 2 つあります:

クリックアンドドラッグでリサイズする場合、Control キー (Mac OS X では Cmd キー) を押しながら操作するとリサイズ時の移動速度が遅くなります。これにより、精密なサイズ設定が容易になります。

レスポンシブデザインモードでページを表示しているときは、ウィンドウの上部に 5 個のコントロールがあります:

終了: レスポンシブデザインモードを終了して、通常のブラウジングに戻ります。
サイズ選択: いくつかの幅と高さのプリセット、または独自に定義したサイズから選択します。
高さと幅を入れ替え: スクリーンの向きのポートレートとランドスケープを切り替えます。
タッチイベントをシミュレート: touch イベントのシミュレーションを有効化/無効化します。touch イベントのシミュレーションを有効化すると、mouse イベントを touch イベントに変換します。
スクリーンショット: コンテンツエリアのスクリーンショットを取得します。スクリーンショットは、Firefox の既定のダウンロード先に保存します。
Custom User Agent を設定: Firefox 47 の新機能。ユーザーエージェント文字列を入力して、入力ボックスからフォーカスを外します。入力ボックスを青色でハイライト表示して、入力した UA 文字列を使用していることを示します。Firefox はカレントタブから実行するリクエストに限り、指定した UA 文字列を含めます。これは、UA スニッフィングによってブラウザーごとに異なるコンテンツを提供するサイトで役に立ちます。文字列を選択および削除すると、通常の UA 文字列に戻ります。