レスポンシブデザインビュー

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

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

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

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

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

有効化と無効化

レスポンシブデザインビューの有効化方法は 2 つあります:

Firefox メニュー (メニューバーを表示している場合や Mac OS X ではツールメニュー) の Web 開発サブメニューで "レスポンシブデザインビュー" を選択する

レスポンシブデザインビューを無効化する方法は 3 つあります:

  • "レスポンシブデザインビュー" メニュー項目を再度選択する
  • キーボードの Escape キーを押す
  • ウィンドウの左上にある "閉じる" ボタンをクリックする

リサイズ

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

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

レスポンシブデザインビューの操作

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

Close レスポンシブデザインビューを閉じて、通常のブラウジングに戻ります。
Select size いくつかの幅と高さの組み合わせのプリセット、または独自に定義したサイズから選択します。
Portrait/Landscape スクリーンの向きのポートレートとランドスケープを切り替えます。

Simulate touch events

touch イベントのシミュレーションを有効化/無効化します。touch イベントのシミュレーションを有効化すると、mouse イベントを touch イベントに変換します。

Take screenshot

コンテンツエリアのスクリーンショットを取得します。

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

 

添付ファイル

ファイル サイズ 日時 添付者:
responsive-design-view
331889 バイト 2013-09-20 14:09:39 wbamberg
responsive-design-view-controls
65217 バイト 2013-09-20 14:27:09 wbamberg

Document Tags and Contributors

Contributors to this page: yyss
最終更新者: yyss,