From 6b8367d36a99d97e88660cf03290ae1fac295a66 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 10 Jul 2021 15:39:58 +0900 Subject: Tools/Responsive_Design_Mode を更新 (#1337) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版は英語版で削除済みの旧版向けの記事であるため削除 - 正規版を 2021/06/29 時点の英語版に同期 - 画像1枚を日本語化 --- .../tools/responsive_design_mode/index.html | 72 ---------------------- 1 file changed, 72 deletions(-) delete mode 100644 files/ja/conflicting/tools/responsive_design_mode/index.html (limited to 'files/ja/conflicting/tools') diff --git a/files/ja/conflicting/tools/responsive_design_mode/index.html b/files/ja/conflicting/tools/responsive_design_mode/index.html deleted file mode 100644 index 35f4517454..0000000000 --- a/files/ja/conflicting/tools/responsive_design_mode/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -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) ---- -
{{ToolsSidebar}}
-

このページでは、Firefox 52 より前のバージョンのレスポンシブデザインモードについて説明します。Firefox 52 以降については、レスポンシブデザインモード をご覧ください。

-
- -

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

- -

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

- -

- -

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

- -

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

- -

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

- -

有効化と無効化

- -

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

- - - -

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

- - - -

リサイズ

- -

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

- - - -

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

- -

レスポンシブデザインモードの操作

- -

- -

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

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