Firefoxのレスポンシブツール

レスポンシブデザインモードの起動方法

レスポンシブデザインモードはレスポンシブデザイン用に様々なサイズを簡単にチェックする事ができます。
レスポンシブデザインモード

1. 起動方法：ツールバー→開発ツール→レスポンシブデザインモード
2. ショートカットキー：Ctrlキー＋Shiftキー＋Mキー

レスポンシブデザインモードの操作方法

レスポンシブデザインモードの操作方法です。

1. 画面サイズの変更（リストを使用）：画面上部中央をクリック
2. 上下のサイズを反転：画面右上のボタン
3. サイズの拡大縮小：画面右下のつまみ

Firefoxのその他の開発ツール

要素の調査

Webページの特定の要素をチェックしたい時に利用すると便利です。

画面を右クリック→要素の調査→左上のアイコンをクリック→画面の対象部分を選択→要素の情報が表示される

開発ツールの活用

Firefoxの開発ツールもかなり便利になっています。
主な機能にはデバッガ、レスポンシブデザインモード、スポイトなどがあり、これらを効果的に使えば開発系のアドオンを減らす事ができます。

開発ツールボタンの設置方法：メニューバー（右クリック）→カスタマイズ→スパナアイコンの「開発ツール」をドラッグでツールバーへ