diff options
Diffstat (limited to 'files/ja/tools/responsive_design_mode/index.html')
| -rw-r--r-- | files/ja/tools/responsive_design_mode/index.html | 208 |
1 files changed, 99 insertions, 109 deletions
diff --git a/files/ja/tools/responsive_design_mode/index.html b/files/ja/tools/responsive_design_mode/index.html index f5d713a53d..a14ff5927e 100644 --- a/files/ja/tools/responsive_design_mode/index.html +++ b/files/ja/tools/responsive_design_mode/index.html @@ -9,142 +9,142 @@ tags: - Responsive Design - Tools - Web Development - - 'l10n:priority' + - l10n:priority translation_of: Tools/Responsive_Design_Mode --- -<p>{{ToolsSidebar}}</p> +<div>{{ToolsSidebar}}</div> -<p><a href="/ja/Apps/Progressive/Responsive">レスポンシブデザイン</a> は、さまざまな端末、特にデスクトップやラップトップだけでなく携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。</p> +<p><a href="/ja/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks">レスポンシブデザイン</a> は、さまざまな端末、特にデスクトップやラップトップだけでなく、携帯電話やタブレットでも適切に表示および動作するウェブサイトを設計することです。</p> <p>もっとも明らかな要素は画面のサイズですが、ほかにもディスプレイの画素密度やタッチをサポートするかといった要素があります。レスポンシブデザインモードは、さまざまな端末でウェブサイトがどのように表示および動作するかを確認するために、これらの要素をシミュレーションする手段を提供します。</p> -<h2 id="Toggling_Responsive_Design_Mode" name="Toggling_Responsive_Design_Mode">レスポンシブデザインモードを切り替える</h2> +<h2 id="Toggling_Responsive_Design_Mode">レスポンシブデザインモードの切り替え</h2> -<p>レスポンシブデザインモードを切り替える方法は 3 つあります:</p> +<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> + <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="Using_Responsive_Design_Mode" name="Using_Responsive_Design_Mode">レスポンシブデザインモードを使用する</h2> +<h2 id="Controlling_Responsive_Design_Mode">レスポンシブデザインモードの操作</h2> -<p>レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。初期状態は 320 x 480 ピクセルです:</p> +<p>レスポンシブデザインモードを有効にすると、ウェブページのコンテンツ領域が特定の端末の画面のサイズに設定されます。初期状態は 320 x 480 ピクセルです。</p> <div class="note"> -<p><strong>メモ:</strong> レスポンシブデザインモードで選択したデバイスは、セッション間で保存されます。</p> +<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><img alt="" src="responsive_ui.png" style="display: block; margin-left: auto; margin-right: auto;"></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> +<p>選択した端末の情報がディスプレイの中央に表示されます。表示内容は左から右に向かって次のようになっています。</p> <ul> - <li>画面のサイズ</li> - <li>端末の画素密度 (端末の物理ピクセルと端末に依存しないピクセルの比率)</li> - <li>タッチイベントのシミュレーション</li> + <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>さらに 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> +<p>画面の右端には 3 つのボタンがあり、次のようなことができます。</p> <ul> - <li>サイズ</li> - <li>端末の画素密度 (devicePixelRatio)</li> - <li>ユーザーエージェント</li> - <li>タッチのサポート</li> + <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="https://mdn.mozillademos.org/files/14797/RDM%20Custom%20Device.gif" style="display: block; height: 800px; margin: 0px auto; width: 800px;"></p> +<p>設定メニューには次のようなコマンドがあります。</p> -<h2 id="Device_controls" name="Device_controls">端末の制御</h2> +<p><img alt="" src="responsive_setting_menu.png" style="display: block; margin: 0 auto;"></p> -<p>ほとんどの端末の特性について、特別な値を与えることもできます。</p> - -<h3 id="Setting_screen_size" name="Setting_screen_size">画面のサイズを設定する</h3> - -<p>画面のサイズを設定するには、ビューポートの下にある値をクリックして編集します:</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><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>ビューポートの右下の角をドラッグして、サイズを変更することもできます。</p> +<p>しかし、そのような機能を確認することに興味がない場合 (異なるサイズでの全体的なレイアウトを確認しているだけのような場合)、このような再読み込みは時間を浪費し、生産性の高い仕事を失う可能性があるため、これらの再読み込みを制御できると便利です。</p> -<p>また Firefox 59 より、キーボードで画面のサイズを編集できます。2 つの寸法の値のいずれかにフォーカスがある (またはカーソルがある) ときに上下のカーソルキーを押すか押し続けて、寸法を 1 ピクセルずつ増減できます。</p> +<p>現在は、このような設定を初めて変更したときに、再読み込みが自動的に行われなくなったことを示す警告メッセージと、再読み込みを自動的に行う方法についての情報が表示されるようになっています。例えば、以下のようになります。</p> -<p>より早く寸法を変えたい場合は、Shift キーを押しながら上下カーソルキーを押すか押し続けると、寸法を 10 ピクセルずつ増減できます。</p> +<p><img alt="" src="page-reload-warning.png" style="display: block; margin: 0 auto;"></p> -<h3 id="Setting_device_pixel_ratio" name="Setting_device_pixel_ratio">端末の画素密度を設定する</h3> +<h2 id="Developer_Toolbox_with_RDM">レスポンシブデザインモードと開発者ツールボックス</h2> -<p>端末の画素密度を設定するには、[DPR] のリストボックスをクリックして希望する値を選択します。</p> +<p>レスポンシブデザインモード自体の切り替えとは別に、開発ツールのツールボックスを表示または非表示にすることができます。</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> +<p><img alt="" src="rdmdevtools.png" style="display: block; margin-left: auto; margin-right: auto;">レスポンシブデザインモードを有効にした状態で、コンテンツ領域がリサイズされたまま通常どおりに閲覧を続けることができます。</p> -<h3 id="Toggling_touch_event_simulation" name="Toggling_touch_event_simulation">タッチイベントのシミュレーションを切り替える</h3> +<h2 id="Device_selection">端末の選択</h2> -<p>タッチイベントのシミュレーションを有効化/無効化するには、人差し指を立てている手のアイコンをクリックします:</p> +<p>ビューポートのすぐ上に「no device selected」というラベルがあります。これをクリックすると、端末名の一覧が表示されます。端末を選択すると、レスポンシブデザインモードでは、選択した端末に合わせて以下のプロパティが設定されます。</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> +<ul> + <li>画面のサイズ</li> + <li>端末の画素密度 (端末の物理ピクセルと端末に依存しないピクセルとの比率)</li> + <li>タッチイベントのシミュレーション</li> +</ul> -<p>タッチイベントのシミュレーションを有効化すると、マウスイベントを <a href="/ja/docs/Web/Guide/API/DOM/Events/Touch_events">タッチイベント</a> に変換します。</p> +<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> -<h3 id="Controlling_page_reload_behavior" name="Controlling_page_reload_behavior">ページ再読み込みの動作を制御する</h3> +<p>{{EmbedYouTube("JNAyKemudv0")}}</p> -<p><em>自動再読み込み</em> ドロップダウンメニューは、Firefox 60 の新機能です:</p> +<p>ドロップダウンリストにある端末は、選択可能な端末の一部です。ドロップダウンリストの末尾に <strong>リストを編集...</strong> という項目があります。これを選択すると、すべての選択肢を含むパネルが表れて、ドロップダウンリストに表示したい端末を選択できます。端末一式や各端末に関連付けられている値は、<span class="im"><a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices</a></span> から取得できます。</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/15841/reload-behavior-controls.png" style="display: block; margin: 0 auto;"></p> +<h3 id="Creating_custom_devices">カスタム端末の作成</h3> -<p>メニューをクリックすると 2 つの項目があり、どちらもデフォルトで表示されます:</p> +<p>レスポンシブデザインモードで<strong>カスタム端末を追加...</strong>をクリックすると、カスタム端末を作成して保存することができます。端末ごとに以下の特性を設定することができます。</p> <ul> - <li>タッチシミュレーションが変更されたときに再読み込み: チェックボックスにチェックを入れると、タッチイベントのシミュレーションを有効化すると自動的にページを再読み込みします。</li> - <li>ユーザーエージェントが変更されたときに再読み込み: チェックボックスにチェックを入れると、ユーザーエージェントを変更すると自動的にページを再読み込みします。</li> + <li>名前</li> + <li>サイズ</li> + <li>端末ピクセル比</li> + <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>また、端末モデル名にマウスポインターを乗せると、既存の端末の特性をツールチップでプレビューできます。</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> +<p>{{EmbedYouTube("SA0RlGtOCmE")}}</p> -<h2 id="Network_throttling" name="Network_throttling">ネットワークを調整する</h2> +<h2 id="Network_throttling">ネットワークの帯域制限</h2> -<p>とても高速なネットワーク接続を使用してすべての開発やテストを行っている場合は、低速な接続を使用してアクセスしたときにサイトで問題が発生するかもしれません。レスポンシブデザインモードで、さまざまな種類のネットワークの特徴をほぼエミュレートするようブラウザに指示できます。</p> +<p>とても高速なネットワーク接続を使用してすべての開発やテストを行っている場合は、低速な接続を使用してアクセスしたときにサイトで問題が発生するかもしれません。レスポンシブデザインモードでは、さまざまな種類のネットワークの特徴に近い形でエミュレートするようブラウザーに指示することができます。</p> -<p>以下の特徴をエミュレートします:</p> +<p>エミュレートするのは以下の特徴です。</p> <ul> <li>ダウンロード速度</li> <li>アップロード速度</li> - <li>最小の遅延</li> + <li>最小遅延</li> </ul> -<p>以下の表で各ネットワークに関連付けられた値を示しますが、正確なパフォーマンスを測定するためにこの機能を頼らないようにしてください。これは、さまざまな状況におけるユーザーエクスペリエンスのおおまかな見解を示そうとするものです。</p> +<p>以下の表で各ネットワークに関連付けられた値を示しますが、正確なパフォーマンスを測定するためにこの機能を頼らないようにしてください。これは、さまざまな状況における使い勝手のおおまかな考え方を示すものです。</p> <table class="fullwidth-table standard-table"> <thead> @@ -152,71 +152,61 @@ translation_of: Tools/Responsive_Design_Mode <th scope="col">選択肢</th> <th scope="col">ダウンロード速度</th> <th scope="col">アップロード速度</th> - <th scope="col">最小の遅延 (ms)</th> + <th scope="col">最小遅延 (ms)</th> </tr> </thead> <tbody> <tr> <td>GPRS</td> - <td>50 Kb/s</td> - <td>20 Kb/s</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>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>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>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>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>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>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>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>ネットワークを選択するには、初期値として [帯域制限なし] と表示されているリストをクリックしてください。</p> -<p>Firefox 53 より、開発ツールの <a href="/ja/docs/Tools/Settings">オプション</a> ページで "Screenshot to clipboard" にチェックを入れると、スクリーンショットをシステムのクリップボードにもコピーします。</p> +<p><img alt="" src="rdm_throttling.png" style="display: block; margin-left: auto; margin-right: auto;"></p> |