---
title: レスポンシブデザインモード (Firefox 52 より前)
slug: conflicting/Tools/Responsive_Design_Mode
translation_of: Tools/Responsive_Design_Mode
translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52)
original_slug: Tools/Responsive_Design_Mode_(before_Firefox_52)
---
<div>{{ToolsSidebar}}</div><div class="note">
<p>このページでは、Firefox 52 より前のバージョンのレスポンシブデザインモードについて説明します。Firefox 52 以降については、<a href="/ja/docs/Tools/Responsive_Design_Mode">レスポンシブデザインモード</a> をご覧ください。</p>
</div>

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

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

<p><img alt="" src="https://mdn.mozillademos.org/files/12738/responsive-design-mode.png" style="height: 788px; width: 735px;"></p>

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

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

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

<h2 id="Enabling_and_disabling" name="Enabling_and_disabling">有効化と無効化</h2>

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

<ul>
 <li>Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) のウェブ開発サブメニューで [レスポンシブデザインモード] を選択する</li>
 <li><a href="/ja/docs/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールボックスのツールバー</a> で [レスポンシブデザインモード] ボタンを押す</li>
 <li>Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)</li>
</ul>

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

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

<h2 id="Resizing" name="Resizing">リサイズ</h2>

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

<ul>
 <li><a href="#select-size">[サイズ選択] コントロール</a> を使用する</li>
 <li>コンテンツエリアの右端と下端、および右下隅にあるコントロールをクリックアンドドラッグする</li>
</ul>

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

<h2 id="Responsive_Design_Mode_controls" name="Responsive_Design_Mode_controls">レスポンシブデザインモードの操作</h2>

<p><img alt="" src="https://mdn.mozillademos.org/files/12736/responsive-design-mode-controls.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

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

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