このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

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

このエントリーをはてなブックマークに追加
操作画面


こんにちは、さち です。

今回は、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を含む投稿はできません。必要な場合は最初のhを削って下さい。
  • 記事に直接関係ない個人のトラブルにはお答えできません。
  • Android は使用経験がないので質問を頂いても答えられません。
  • その他詳細はこちら





記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ