レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」

レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」

Posted at September 20,2012 12:03 AM
Tag:[Firefox, Responsive]

レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。

レスポンシブデザインビュー

「レスポンシブデザインビュー」はFirefox15から搭載されています。

1.「レスポンシブWebデザイン」とは

「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。

レスポンシブ(Responsive)は、「よく反応して」「敏感な」という意味があるようです。

レスポンシブWebデザインを確認するには、複数のデバイスを用いるか、極端な話、PCでブラウザの幅を変更すればいいのですが、Firefoxの「レスポンシブデザインビュー」を利用すれば、より効率的に確認作業が行えます。

2.「レスポンシブデザインビュー」の使い方

レスポンシブWebデザインのサンプルサイトとして「NHKスタジオパーク」を利用させて頂きます。

NHKスタジオパーク(2012年9月現在のデザイン)
NHKスタジオパーク

レスポンシブWebデザインのページを開いた状態で、メニューバーから「ツール」→「Web開発」→「レスポンシブデザインビュー」を選択(またはCtrl+Shift+M)。

レスポンシブデザインビュー

これで「レスポンシブデザインビュー」に切り替わりました。

レスポンシブデザインビュー

黒背景の中に表示されている部分が、実際のレスポンシブWebデザインで表示される内容です。

3.サイズの変更

表示サイズは左上に表示されます。「(指定値)」というのは、後述するブラウザの幅と高さをマウスで変更した値のことのようです。

表示サイズ

サイズの部分をクリックすると、デフォルトで用意されているサイズに変更できます。ここでは「360x640」にしてみます。

サイズの変更

これで「360x640」に変更されました。サイズにはスクロールバー部分が含まれます。

「360x640」に変更

先述した「(指定値)」ですが、マウスで任意の値にリサイズするには画面の右下をポイントしてドラッグします。

任意の値にリサイズ

デバイスの方向を変えたときにも対応できるよう、「高さと幅を入れ替え」が用意されています。「360x640」の表示で「高さと幅を入れ替え」をクリックすれば、表示が「640x360」に切り替わります。

高さと幅を入れ替え

変更サイズは左上に常に表示されるので、レスポンシブWebデザイン以外に、特定のサイズでキャプチャしたい場合などで使えそうです。

4.ディスプレイ幅を超えたサイズの確認が可能

この機能で大変便利だと思ったのは、閲覧するブラウザの幅よりも大きなサイズを確認できることです。

たとえば、閲覧するブラウザ(というかディスプレイ)の幅が1024pxであっても、「1280x600」や「1920x900」の確認が可能です。

下のスクリーンショットは、幅1024pxのディスプレイで「1280x600」を選択したときの表示です。

幅1024pxのディスプレイで「1280x600」を選択したときの表示

横スクロールすれば1280px分の表示が確認できます。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)