From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/tools/responsive_design_mode/index.html | 222 +++++++++++++++++++++++ 1 file changed, 222 insertions(+) create mode 100644 files/ja/tools/responsive_design_mode/index.html (limited to 'files/ja/tools/responsive_design_mode') diff --git a/files/ja/tools/responsive_design_mode/index.html b/files/ja/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..f5d713a53d --- /dev/null +++ b/files/ja/tools/responsive_design_mode/index.html @@ -0,0 +1,222 @@ +--- +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 +--- +

{{ToolsSidebar}}

+ +

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

+ +

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

+ +

レスポンシブデザインモードを切り替える

+ +

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

+ + + +

レスポンシブデザインモードを使用する

+ +

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

+ +
+

メモ: レスポンシブデザインモードで選択したデバイスは、セッション間で保存されます。

+
+ +

+ +

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

+ +

+ +

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

+ +

端末選択

+ +

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

+ + + +

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

+ +

{{EmbedYouTube("JNAyKemudv0")}}

+ +

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

+ +

カスタム端末を保存する

+ +

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

+ + + +

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

+ +

+ +

端末の制御

+ +

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

+ +

画面のサイズを設定する

+ +

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

+ +

+ +

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

+ +

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

+ +

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

+ +

端末の画素密度を設定する

+ +

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

+ +

+ +

タッチイベントのシミュレーションを切り替える

+ +

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

+ +

+ +

タッチイベントのシミュレーションを有効化すると、マウスイベントを タッチイベント に変換します。

+ +

ページ再読み込みの動作を制御する

+ +

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

+ +

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

+ +

向きを切り替える

+ +

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

+ +

+ +

ネットワークを調整する

+ +

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

+ +

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

+ + + +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
選択肢ダウンロード速度アップロード速度最小の遅延 (ms)
GPRS50 Kb/s20 Kb/s500
Regular 2G250 Kb/s50 Kb/s300
Good 2G450 Kb/s150 Kb/s150
Regular 3G750 Kb/s250 Kb/s100
Good 3G1.5 Mb/s750 Kb/s40
Regular 4G/LTE4 Mb/s3 Mb/s20
DSL2 Mb/s1 Mb/s5
Wi-Fi30 Mb/s15 Mb/s2
+ +

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

+ +

+ +

スクリーンショットを取得する

+ +

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

+ +

+ +

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

+ +

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

-- cgit v1.2.3-54-g00ecf