Top Firefox拡張機能(アドオン) >Firefox上でレスポンシブルデザインをテストできるアドオン「toggle Responsive」
2014年09月16日

Firefox上でレスポンシブルデザインをテストできるアドオン「toggle Responsive」

最近ではパソコンだけでなく、タブレット端末やスマートフォンでもサイトを閲覧するユーザーが増えていることから、サイトを制作する際にどんな端末でも最適な表示ができるように、レスポンシブデザインが採用されることが多くなってきました。

こうした最適化を行うことで、端末を選ばず快適なブラウジングをしてもらうことができるわけです。

このようなサイトデザインが行われていることは、普段パソコンでアクセスしていると気がつきにくいものですが、管理者はもちろん、訪問者の中にも、見ているサイトがお手持ちの端末でどのように表示されるかが気になることもあるのではないでしょうか。

Firefoxに「toggle Responsive」というアドオンをインストールしておけば、こんな時でもワンタッチで閲覧中のサイトのレスポンシブデザインをチェックすることができるようになります。

「toggle Responsive」をインストールすると、ツールバーカスタマイズによって専用のボタン 02_toggle Responsive Firefox Add-ons.JPG をツールバーなどに設置することができます。

たとえば以下のようなサイトを閲覧中にこのボタンをクリックすると、画面が一般的なスマートフォンで閲覧しているような状態に切り替わり、Firefox上でレスポンシブデザインを試すことができるようになります。


■ノーマル表示


01_toggle Responsive Firefox Add-ons+1.jpg


■レスポンシブデザイン表示


03_toggle Responsive Firefox Add-ons+1.jpg


もちろんこの表示状態でも各部のクリックやスクロールも可能となっており、実際に端末で操作した場合、どのようなアクションでどのように閲覧することができるのかを確認することができます。

また、画面上部にはコントロール部も用意されており、ここでは(左から)


04_toggle Responsive Firefox Add-ons.JPG


■画面を閉じて元の表示に戻る。
■解像度を変更する。
■高さと幅を入れ替える。(縦横切り替え)
■タッチイベントを試す。
■スクリーンショットを撮る。

といった操作が可能です。

*画面上、右、右下のスライダを動かすことで自由に画面サイズを変更することもできます。

このように、PC用のページが他の端末でどのように表示されるのかをFirefox上でチェックすることができるようになるというアドオンです。

開発者の方の動作確認や、閲覧中のページをスマートフォンなどにブックマークして外出先で見るようなときの事前確認に便利ですね。


ダウンロード:toggle Responsive(Add-ons for Firefox)



<関連記事>


■Firefoxのレスポンシブデザインビューに様々な端末のプリセットを追加できるアドオン「More Display Resolutions」




この記事をはてなブックマークに登録 follow us in feedly このエントリを del.icio.us に登録 この記事をクリップ!Yahoo!ブックマークに登録
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック