テクノロジー・動画・写真・デザインとか

Chrome用レスポンシブWebデザイン・エクステンションまとめ

レスポンシブWebデザイン(Responsive Web Design)とは、PC、iPadなどのタブレット、iPhoneなどのスマートフォンに最適化したWebサイトの制作手法で、単一のHTMLとCSSを書き分けてレイアウトを変更することでデバイスごとにサイトを作りなおすことなくWebサイトを制作することができる。

こんな感じでサイトのイメージを保ちつつ、CSSをかき分けてレイアウトを変更するだけで様々な画面サイズのデバイスに対応できる。
イメージはこんな感じだ。
レスポンシブデザイン
http://baby-g.jp/

レスポンシブWebデザインのお勉強はこちら、問題点についてはこちらにて参考にしてもらい、今回は、レスポンシブWebデザイン制作に便利なChromeのエクステンションの紹介。

続きを読む

レスポンシブWebデザイン制作時は、これまではブラウザの画面を拡大縮小とかでその見た目を変更して確認していたのだが、Chromeのエクステンションを使うとクリックだけで画面サイズを変更できるので便利だ。

responsive-web-design

今回はいくつかのレスポンシブWebデザイン用Chromeエクステンションを紹介するが、このresponsive-web-designが一番のお薦めだ。
https://chrome.google.com/webstore/detail/gkmaomcbenajgclicfopaempggmbghka

responsive-web-designのエクステンションを追加してもそのままでは利用できない。
エクステンションをインストールしたらこちらのサイトへアクセスして、「RWD Bookmarklet」というブックマークレットボタンをブックマークバーにドラッグして登録する必要がある。
http://responsive.victorcoulon.fr/

ドラッグしたブックマークレットは、下図の矢印のように表示されるので、それをクリックするとこの画面になる。
iPhoneとiPad用の縦と横の画面サイズが予め用意されていて、①をクリックするとキーボードが表示されるようになっている。
responsive-web-design
また、画面自体はスクロールバーが表示されていないので、カーソルを画面上に持っていき、ホイールでスクロールすることができる。

Responsive Tester

Responsive Testerは、残念なことに自分で画面サイズを入力しなくてはならないが、表示させたい画面サイズを入力してエンターキーでそのサイズの画面に切り替えてくれる。
https://chrome.google.com/webstore/detail/apjlfpjacfkcckoimkbfhliehbkbnblm

Responsive Tester

Resizer

Resizerは、iPhoneとiPad、PCに最適化された画面サイズが予め用意されており、「+」、「-」でサイズを変更でき、「Toggle Orientation」で縦と横の画面切り替えができる。
残念なことに上記のBaby-Gのサイトでは、iPhoneサイズだとうまく画像が縮小表示されなかったのとプルダウンメニューがうまく表示されなかった。
https://chrome.google.com/webstore/detail/gekhbemhcekbaodnijabeajoeolfplbp/related

Resizer

responsiView

responsiViewは、予めタブレット用スマートフォン用の画面サイズが用意されており、自分で画面サイズを設定することもできる。
新規にウィンドウが立ち上がるようになっている。
https://chrome.google.com/webstore/detail/kcemonjjmilbiepahkhanlkddonpjlep

responsiView

Responsive Window

Responsive Windowは、エクステンションのボタンをクリックすると、新規に横幅320pxサイズのウィンドウが立ち上がるようになっている。
https://chrome.google.com/webstore/detail/gnflplbfnfekejfoalgbcikilalbloec

Firefoxのバージョン15では標準

ちなみに、Firefoxのバージョン15では、標準でこのレスポンシブWebデザイン向けの機能が備わるようになった。
メニューバーが表示されていない場合は、Altキーで表示させて、「ツール」、「Web開発」、「レスポンシブデザインビュー」と選択することで表示される。

その他/携帯シミュレーター

以前に書いた携帯やスマートフォンの画面をシミュレートしてくれるエクステンションもあるのでチェックしておくといいだろう。
Chrome用携帯シミュレーターExtension