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
---
<div>{{ToolsSidebar}}</div>

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

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

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

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

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

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

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

<div class="note">
<p><strong>メモ:</strong> レスポンシブデザインモードで選択した端末とその向き (縦または横) は、セッションをまたいで保存されます。</p>
</div>

<p><img alt="" src="responsive_ui.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>選択した端末の情報がディスプレイの中央に表示されます。表示内容は左から右に向かって次のようになっています。</p>

<ul>
 <li><em>選択中の端末の名前</em> - 「端末設定」画面で選択した端末が表示されるドロップダウンリストです。</li>
 <li><em>画面サイズ</em> - 幅の高さの値を編集して端末サイズを変更するには、数値を直接編集したり、 <kbd>↑</kbd> と <kbd>↓</kbd> キーで値を 1 ピクセルずつ増減させたり、 <kbd>Shift</kbd> を押しながら押すと値を 10 ずつ変化させたりすることができます。
  <ul>
   <li>マウスホイールでは、サイズの値を 1 ピクセルずつ変化させることができます</li>
   <li>また、ビューポートの右下隅をつかみ、希望の大きさにドラッグすることで、端末の画面サイズを変更することができます。</li>
  </ul>
 </li>
 <li><em>方向 (縦または横)</em> - このセッションはセッションをまたいで保持されます</li>
 <li><em>DPR (ピクセル比)</em> - Firefox 68 以降では、 DPR は編集できなくなりました。 DPR を変更するには新しい端末を作成してください</li>
 <li><em>帯域制限</em> - 2G, 3G, LTE など、適用する接続の帯域制限を選択できるドロップダウンリストです</li>
 <li><em>タッチシミュレーションの有効化/無効化</em> - レスポンスデザインモードがタッチイベントをシミュレートするかどうかを切り替えます。タッチイベントシミュレーションが有効になっている場合は、マウスイベントが<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>に変換されます。これには (Firefox 79 以降では) マウスドラッグイベントのタッチドラッグイベントへの変換も含まれます。 (なお、タッチシミュレーションが有効になると、ツールバーアイコンが青くなります。シミュレーションが無効になると、アイコンが黒くなります。</li>
</ul>

<p>画面の右端には 3 つのボタンがあり、次のようなことができます。</p>

<ul>
 <li><em>カメラボタン</em> - スクリーンショットを撮ります
  <ul>
   <li>
    <p>スクリーンショットは Firefox の既定のダウンロード先に保存されます。</p>
   </li>
   <li>
    <p>開発者ツールの<a href="/ja/docs/Tools/Settings">設定</a>ページにある「スクリーンショットをクリップボードへコピー」がチェックされている場合、スクリーンショットはシステムクリップボードのにコピーされます。</p>
   </li>
  </ul>
 </li>
 <li><em>設定ボタン</em> - レスポンスデザインモードの設定メニューを開きます</li>
 <li><em>閉じるボタン</em> - レスポンスデザインモードを閉じ、通常の閲覧に戻ります</li>
</ul>

<p>設定メニューには次のようなコマンドがあります。</p>

<p><img alt="" src="responsive_setting_menu.png" style="display: block; margin: 0 auto;"></p>

<ul>
 <li><em>左寄せビューポート</em> - チェックした場合、レスポンシブデザインモードのビューポートがブラウザーウィンドウの左端に移動します</li>
 <li><em>ユーザーエージェントを表示</em> - チェックした場合、ユーザーエージェント文字列を表示します</li>
 <li>最後の 2 つの選択肢は、いつページが読み込まれるのかを定義します。
  <ul>
   <li><em>タッチシミュレーションが変更されたときに再読み込み:</em> このオプションが有効になった場合は、タッチ対応を切り替えるたびにページが再読み込みされます。</li>
   <li><em>ユーザーエージェントが変更されたときに再読み込み:</em> このオプションが有効になった場合は、ユーザーエージェントが変更されるたびにページが再読み込みされます。</li>
  </ul>
 </li>
</ul>

<p>これらが変更されたときに再読み込みするようにすると、そうしないと適用されないページの動作があるため便利です。例えば、多くのページでは、ロード時にタッチの対応をチェックし、対応している場合にのみイベントハンドラーを追加したり、特定のブラウザーでのみ特定の機能を有効にしたりしています。</p>

<p>しかし、そのような機能を確認することに興味がない場合 (異なるサイズでの全体的なレイアウトを確認しているだけのような場合)、このような再読み込みは時間を浪費し、生産性の高い仕事を失う可能性があるため、これらの再読み込みを制御できると便利です。</p>

<p>現在は、このような設定を初めて変更したときに、再読み込みが自動的に行われなくなったことを示す警告メッセージと、再読み込みを自動的に行う方法についての情報が表示されるようになっています。例えば、以下のようになります。</p>

<p><img alt="" src="page-reload-warning.png" style="display: block; margin: 0 auto;"></p>

<h2 id="Developer_Toolbox_with_RDM">レスポンシブデザインモードと開発者ツールボックス</h2>

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

<p><img alt="" src="rdmdevtools.png" style="display: block; margin-left: auto; margin-right: auto;">レスポンシブデザインモードを有効にした状態で、コンテンツ領域がリサイズされたまま通常どおりに閲覧を続けることができます。</p>

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

<p>ビューポートのすぐ上に「no device selected」というラベルがあります。これをクリックすると、端末名の一覧が表示されます。端末を選択すると、レスポンシブデザインモードでは、選択した端末に合わせて以下のプロパティが設定されます。</p>

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

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

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

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

<h3 id="Creating_custom_devices">カスタム端末の作成</h3>

<p>レスポンシブデザインモードで<strong>カスタム端末を追加...</strong>をクリックすると、カスタム端末を作成して保存することができます。端末ごとに以下の特性を設定することができます。</p>

<ul>
 <li>名前</li>
 <li>サイズ</li>
 <li>端末ピクセル比</li>
 <li>ユーザーエージェント文字列</li>
 <li>タッチスクリーン</li>
</ul>

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

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

<h2 id="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>ネットワークを選択するには、初期値として [帯域制限なし] と表示されているリストをクリックしてください。</p>

<p><img alt="" src="rdm_throttling.png" style="display: block; margin-left: auto; margin-right: auto;"></p>