TopFirefox > 2012年9月
2012年9月20日

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

September 20,2012 12:03 AM
Tag:[, ]
Permalink

レスポンシブ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分の表示が確認できます。

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3