レスポンシブデザインビュー

レスポンシブデザインは、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインビューは、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 キー) を押しながら操作するとリサイズ時の移動速度が遅くなります。これにより、精密なサイズ設定が容易になります。