path: root/files/ja/tools/responsive_design_mode/index.html

---
title: レスポンシブデザインモード
slug: Tools/Responsive_Design_Mode
tags:
  - Design
  - Dev Tools
  - Firefox
  - Guide
  - Responsive Design
  - Tools
  - Web Development
  - 'l10n:priority'
translation_of: Tools/Responsive_Design_Mode
---
<p>{{ToolsSidebar}}</p>

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

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

<h2 id="Toggling_Responsive_Design_Mode" name="Toggling_Responsive_Design_Mode">レスポンシブデザインモードを切り替える</h2>

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

<ul>
 <li>Firefox メニュー (メニューバーを表示している場合や macOS では [ツール] メニュー) の [ウェブ開発] サブメニューで [レスポンシブデザインモード] を選択します。</li>
 <li>開発ツールのツールボックスで、<a href="/ja/docs/Tools/Tools_Toolbox#Toolbar" title="Tools_Toolbox#Toolbar">ツールバー</a> の [レスポンシブデザインモード] ボタンを押します。<img alt="" src="https://mdn.mozillademos.org/files/16318/RDM_button.png" style="display: block; height: 664px; margin-left: auto; margin-right: auto; width: 852px;"></li>
 <li>キーボードで Ctrl + Shift + M (OS X では Cmd + Opt + M) を押下します。</li>
</ul>

<h2 id="Using_Responsive_Design_Mode" name="Using_Responsive_Design_Mode">レスポンシブデザインモードを使用する</h2>

<p>レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。初期状態は 320 x 480 ピクセルです:</p>

<div class="note">
<p><strong>メモ:</strong> レスポンシブデザインモードで選択したデバイスは、セッション間で保存されます。</p>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/16319/RDM.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 852px;"></p>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/16320/RDMdevtools.png" style="display: block; height: 799px; margin-left: auto; margin-right: auto; width: 852px;"></p>

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

<h2 id="Device_selection" name="Device_selection">端末選択</h2>

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

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

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

<p>{{EmbedYouTube("JNAyKemudv0")}}</p>

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

<h3 id="Saving_custom_devices" name="Saving_custom_devices">カスタム端末を保存する</h3>

<p>Firefox 54 より、レスポンシブデザインモードでカスタム端末を保存できます。それぞれの端末で以下の特性を持つことができます:</p>

<ul>
 <li>サイズ</li>
 <li>端末の画素密度 (devicePixelRatio)</li>
 <li>ユーザーエージェント</li>
 <li>タッチのサポート</li>
</ul>

<p>また、端末モデル名にマウスポインターを乗せると、既存の端末の特性をツールチップでプレビューできます。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14797/RDM%20Custom%20Device.gif" style="display: block; height: 800px; margin: 0px auto; width: 800px;"></p>

<h2 id="Device_controls" name="Device_controls">端末の制御</h2>

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

<h3 id="Setting_screen_size" name="Setting_screen_size">画面のサイズを設定する</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14939/rdm-set-size-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>

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

<p>また Firefox 59 より、キーボードで画面のサイズを編集できます。2 つの寸法の値のいずれかにフォーカスがある (またはカーソルがある) ときに上下のカーソルキーを押すか押し続けて、寸法を 1 ピクセルずつ増減できます。</p>

<p>より早く寸法を変えたい場合は、Shift キーを押しながら上下カーソルキーを押すか押し続けると、寸法を 10 ピクセルずつ増減できます。</p>

<h3 id="Setting_device_pixel_ratio" name="Setting_device_pixel_ratio">端末の画素密度を設定する</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14941/rdm-set-dpr-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<h3 id="Toggling_touch_event_simulation" name="Toggling_touch_event_simulation">タッチイベントのシミュレーションを切り替える</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14935/rdm-toggle-touch-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<p>タッチイベントのシミュレーションを有効化すると、マウスイベントを <a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events">タッチイベント</a> に変換します。</p>

<h3 id="Controlling_page_reload_behavior" name="Controlling_page_reload_behavior">ページ再読み込みの動作を制御する</h3>

<p><em>自動再読み込み</em> ドロップダウンメニューは、Firefox 60 の新機能です:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15841/reload-behavior-controls.png" style="display: block; margin: 0 auto;"></p>

<p>メニューをクリックすると 2 つの項目があり、どちらもデフォルトで表示されます:</p>

<ul>
 <li>タッチシミュレーションが変更されたときに再読み込み: チェックボックスにチェックを入れると、タッチイベントのシミュレーションを有効化すると自動的にページを再読み込みします。</li>
 <li>ユーザーエージェントが変更されたときに再読み込み: チェックボックスにチェックを入れると、ユーザーエージェントを変更すると自動的にページを再読み込みします。</li>
</ul>

<p>Firefox 60 より前のバージョンでは、自動的に再読み込みしていました。これは、再読み込みしなければ適用されないページがあるためです。例えば、多くのページが読み込み時にタッチのサポートを確認して、サポートされている場合に限りイベントハンドラーを追加したり、特定のブラウザーでのみ特定の機能を有効化したりしています。</p>

<p>しかし、このような機能を実行することに興味がない場合 (さまざまなサイズで全体のレイアウトを確認するなど) は、再読み込みで時間を浪費してよい仕事ができなくなるかもしれませんので、再読み込みを制御できると役に立ちます。</p>

<p>はじめてこの設定を変更したときに再読み込みを自動的に行わないことと、自動的に再読み込みできるようにする方法を示す警告メッセージを表示します。例えば:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15840/page-reload-warning.png" style="display: block; margin: 0 auto;"></p>

<h3 id="Toggling_orientation" name="Toggling_orientation">向きを切り替える</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14937/rdm-toggle-orientation-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<h2 id="Network_throttling" name="Network_throttling">ネットワークを調整する</h2>

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

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

<ul>
 <li>ダウンロード速度</li>
 <li>アップロード速度</li>
 <li>最小の遅延</li>
</ul>

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

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">選択肢</th>
   <th scope="col">ダウンロード速度</th>
   <th scope="col">アップロード速度</th>
   <th scope="col">最小の遅延 (ms)</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>GPRS</td>
   <td>50 Kb/s</td>
   <td>20 Kb/s</td>
   <td>500</td>
  </tr>
  <tr>
   <td>Regular 2G</td>
   <td>250 Kb/s</td>
   <td>50 Kb/s</td>
   <td>300</td>
  </tr>
  <tr>
   <td>Good 2G</td>
   <td>450 Kb/s</td>
   <td>150 Kb/s</td>
   <td>150</td>
  </tr>
  <tr>
   <td>Regular 3G</td>
   <td>750 Kb/s</td>
   <td>250 Kb/s</td>
   <td>100</td>
  </tr>
  <tr>
   <td>Good 3G</td>
   <td>1.5 Mb/s</td>
   <td>750 Kb/s</td>
   <td>40</td>
  </tr>
  <tr>
   <td>Regular 4G/LTE</td>
   <td>4 Mb/s</td>
   <td>3 Mb/s</td>
   <td>20</td>
  </tr>
  <tr>
   <td>DSL</td>
   <td>2 Mb/s</td>
   <td>1 Mb/s</td>
   <td>5</td>
  </tr>
  <tr>
   <td>Wi-Fi</td>
   <td>30 Mb/s</td>
   <td>15 Mb/s</td>
   <td>2</td>
  </tr>
 </tbody>
</table>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14945/rdm-network-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>

<h2 id="Taking_a_screenshot" name="Taking_a_screenshot">スクリーンショットを取得する</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/14943/rdm-screenshot-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>

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

<p>Firefox 53 より、開発ツールの <a href="/ja/docs/Tools/Settings">オプション</a> ページで "Screenshot to clipboard" にチェックを入れると、スクリーンショットをシステムのクリップボードにもコピーします。</p>