mozilla
Your Search Results

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

    レスポンシブデザインは、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインビューは、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 個のコントロールがあります:

    レスポンシブデザインビューを終了する レスポンシブデザインビューを閉じて、通常のブラウジングに戻ります。
    サイズ選択

    いくつかの幅と高さの組み合わせのプリセット、または独自に定義したサイズから選択します。

    Firefox 33 よりここに表示している数値を直接編集できるようになり、独自の寸法を簡単に定義できます。

    高さと幅を入れ替え スクリーンの向きのポートレートとランドスケープを切り替えます。

    タッチイベントをシミュレート

    touch イベントのシミュレーションを有効化/無効化します。touch イベントのシミュレーションを有効化すると、mouse イベントを touch イベントに変換します。

    スクリーンショット

    コンテンツエリアのスクリーンショットを取得します。

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

     

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

    Contributors to this page: wbamberg, yyss
    最終更新者: wbamberg,