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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • かしこいかわいい新PC「エリーチカ」がやってきた(時々ポンコツ) (11/28)
  • Windows:目的毎,ファイルの種類(拡張子)毎に既定アプリを変更 (11/25)
  • Windows:ヘッドホン(イヤホン)から音が出ないときの対処法 (11/23)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

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


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

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

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








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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





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

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

    ブログパーツ