こんにちは、さち です。
今回は、Firefox でのスマホサイトの閲覧，作成，調査を
便利にする小技について書いていきます。
スマホサイトの表示サイズを変更
- PC から Firefox を使ってスマホサイトを見ると、幅が広すぎる！
でも、ウィンドウサイズを変えるのは面倒…。
そういう時は、「Ctrl + Shift + M」キーを押しましょう。
（メニューの「ツール」→「Web開発」→「レスポンシブデザインビュー」でも可）
- レスポンシブデザインビューが有効になり
ウィンドウ内でサイトの表示範囲を調節できます。
- サイトの表示範囲はプリセットから選択します。
- プリセットに適当なサイズがない場合は
サイト表示範囲の端をドラッグして自由に変更可能です。
- また、「矢印」アイコンをクリックすると…
- 「幅」と「高さ」が入れ替わります。
つまり、スマホを横向きにした時の表示を再現できるわけです。
レスポンシブデザインビューを終了するには
もう一度、「Ctrl + Shift + M」キーを押すか
ビュー左上にある「×」アイコンをクリックしましょう。
スマホとまったく同じ表示というわけにはいきませんが
アドオン不要で簡単に使えるので簡易的な再現として役立ちます。
「Ctrl + Shift + M」、覚えておいて損はありません！
スクリーンショットを撮る
- レスポンシブデザインビュー（Ctrl + Shift + M）の上部にある
「カメラ」アイコンをクリック。
- すると、こんな感じで
表示エリアのみのスクリーンショットを撮影できます。
撮影した画像ファイルは
Firefox の設定で指定しているダウンロード保存フォルダに入ります。
ちなみに、スクリーンショットのファイル名は
「Screen Shot 2014-09-12 at 21.17.42」のように
「Screen Shot 日付 at 時刻」という形式になります。
ウェブ開発ツールを右サイドに移動
- 「Ctrl + Shift + I」で インスペクタ（ウェブ開発ツール） を起動しました。
（メニューの「ツール」→「Web開発」→「インスペクタ」でも可）
ウェブ開発ツールが重なって、サイトの表示エリアが狭くなり見にくいですね…。
- そういう時は、ウェブ開発ツール右上にある
右側が塗り潰された四角形のアイコンをクリックしましょう。
- すると、ウェブ開発ツールが右サイドに移動。サイトが見やすくなりました！
ちなみに、ウィンドウが重なっているアイコンをクリックすると
ウェブ開発ツールをウィンドウから分離できます。
場面によってはこちらの方が使いやすいかもしれません。
その他、知ってると役立つかもしれないこと
ウェブ開発ツールの「歯車」アイコンから設定を変更することで
レスポンシブデザインビューをもっと便利に使えます。
■キャッシュを無効にする
「キャッシュを無効」にチェックを入れると
再読み込み時にキャッシュを無視してサイトを表示します。
スマホサイト作成時の表示チェックに便利です。
■ウェブ開発ツールを黒色表示
「Dark theme」を選択すると、ウェブ開発ツールが黒色基調の表示になります。
基本的に、サイトは背景が白色であることが多いので
サイト と ウェブ開発ツール の境界が分かりやすくなります。
■ページ全体のスクリーンショットを撮る
「ページ全体のスクリーンショットを撮影します」にチェックを入れると
スクロールしないと見えない範囲も含めてスクリーンショットを撮影できます。
撮影時は、ウェブ開発ツールの「カメラ」アイコンをクリックしましょう。
レスポンシブデザインビューの方ではないので注意！
こんな感じで、ページ全体の縦長スクリーンショットが撮れます。
コメント