スポンサーリンク

Firefox:スマホサイトの閲覧,作成,調査を便利にする小技集

この記事は約3分で読めます。

操作画面

こんにちは、さち です。

今回は、Firefox でのスマホサイトの閲覧,作成,調査を
便利にする小技について書いていきます。

スポンサーリンク

スマホサイトの表示サイズを変更

  1. PC から Firefox を使ってスマホサイトを見ると、幅が広すぎる!
    でも、ウィンドウサイズを変えるのは面倒…。
    そういう時は、「Ctrl + Shift + M」キーを押しましょう。
    (メニューの「ツール」→「Web開発」→「レスポンシブデザインビュー」でも可)
    操作画面
  2. レスポンシブデザインビューが有効になり
    ウィンドウ内でサイトの表示範囲を調節できます。
    操作画面
  3. サイトの表示範囲はプリセットから選択します。
    操作画面
  4. プリセットに適当なサイズがない場合は
    サイト表示範囲の端をドラッグして自由に変更可能です。
    操作画面
  5. また、「矢印」アイコンをクリックすると…
    操作画面
  6. 「幅」と「高さ」が入れ替わります。
    つまり、スマホを横向きにした時の表示を再現できるわけです。
    操作画面

レスポンシブデザインビューを終了するには
もう一度、「Ctrl + Shift + M」キーを押すか
ビュー左上にある「×」アイコンをクリックしましょう。

スマホとまったく同じ表示というわけにはいきませんが
アドオン不要で簡単に使えるので簡易的な再現として役立ちます。

「Ctrl + Shift + M」、覚えておいて損はありません!

スクリーンショットを撮る

  1. レスポンシブデザインビュー(Ctrl + Shift + M)の上部にある
    「カメラ」アイコンをクリック。
    操作画面
  2. すると、こんな感じで
    表示エリアのみのスクリーンショットを撮影できます。
    操作画面

撮影した画像ファイルは
Firefox の設定で指定しているダウンロード保存フォルダに入ります。

ちなみに、スクリーンショットのファイル名は
「Screen Shot 2014-09-12 at 21.17.42」のように
「Screen Shot 日付 at 時刻」という形式になります。

ウェブ開発ツールを右サイドに移動

  1. Ctrl + Shift + I」で インスペクタ(ウェブ開発ツール) を起動しました。
    (メニューの「ツール」→「Web開発」→「インスペクタ」でも可)
    ウェブ開発ツールが重なって、サイトの表示エリアが狭くなり見にくいですね…。
    操作画面
  2. そういう時は、ウェブ開発ツール右上にある
    右側が塗り潰された四角形のアイコンをクリックしましょう。
    操作画面
  3. すると、ウェブ開発ツールが右サイドに移動。サイトが見やすくなりました!
    操作画面

ちなみに、ウィンドウが重なっているアイコンをクリックすると
ウェブ開発ツールをウィンドウから分離できます。
場面によってはこちらの方が使いやすいかもしれません。
操作画面

その他、知ってると役立つかもしれないこと

ウェブ開発ツールの「歯車」アイコンから設定を変更することで
レスポンシブデザインビューをもっと便利に使えます。
操作画面

■キャッシュを無効にする
「キャッシュを無効」にチェックを入れると
再読み込み時にキャッシュを無視してサイトを表示します。
スマホサイト作成時の表示チェックに便利です。
操作画面

■ウェブ開発ツールを黒色表示
「Dark theme」を選択すると、ウェブ開発ツールが黒色基調の表示になります。
基本的に、サイトは背景が白色であることが多いので
サイト と ウェブ開発ツール の境界が分かりやすくなります。
操作画面

■ページ全体のスクリーンショットを撮る
「ページ全体のスクリーンショットを撮影します」にチェックを入れると
スクロールしないと見えない範囲も含めてスクリーンショットを撮影できます。
操作画面

撮影時は、ウェブ開発ツールの「カメラ」アイコンをクリックしましょう。
レスポンシブデザインビューの方ではないので注意!
操作画面

こんな感じで、ページ全体の縦長スクリーンショットが撮れます。
操作画面

コメント

タイトルとURLをコピーしました