デラ便利!Firefoxのレスポンシブデザインビュー

 
 

デラ便利!Firefoxのレスポンシブデザインビュー

レスポンシブデザインのサイトは、閲覧する機器の画面幅によってレイアウトが変わるのが特徴です。

PC上で「タブレットで見た時」「スマホで見た時」それぞれどんな風になってるかな? を確認(シミュレート)する際には、ブラウザの幅を伸縮させて見てみる・・というのが一般的です。

。。でもこれ、若干面倒ですよね。

そんな時! (・o・)b

Mozillaのブラウザ:Firefox に標準で搭載されている

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

という機能が大変重宝するので、ご紹介いたします。

ホームページを作る人にはもちろん、発注者側の皆様にとっても。。
広義の関係者全員が楽になる、便利な機能だと思います!

(▽クリックで拡大)
Firefoxレスポンシブデザインビュー

ツール ⇒ Web開発 ⇒ レスポンシブデザインビュー と辿るか、
もしくは(Windowsの場合)Ctrl + Shift + M キー同時押しで、一発で切替可能です
(このキーボードショートカット覚えると超便利!^^)


320 x 480をはじめとし、代表的なスクリーンサイズが最初から設定されています。
ユーザーが任意のサイズを追加することも出来ます。
縦横1ボタンで入替できたり、そのサイズでスクリーンショットが撮れたり。。詳しくはこちら。

▼Mozilla公式 – レスポンシブデザインビュー 解説・紹介
https://developer.mozilla.org/ja/docs/Tools/Responsive_Design_View


なお、デバイスごとのスクリーンサイズはこちらが参考になります。

▼CSS Pixel Widths(英語)
http://www.canbike.org/CSSpixels/

表の右2列(Device-Width, Device-Height)が、PCブラウザで認識される幅・高さになります。
掲載情報は時々更新されている模様で、これを書いてる時点(2014/06/28)では、『* Last Updated: Sun Mar 30 21:39:44 EDT 2014 』 となっていますね。

iPhone 3/4/5、iPad各世代、XperiaやGalaxyの代表モデル、Nexus7の2012モデルと2013モデルの違いなどもバッチリ載ってて助かります^^

(▽こんな感じの表で)
03_CssPixelWidth-テープル


Firefoxを初めて使われる方へ


▼Mozilla Firefox ダウンロードはこちらから
http://www.mozilla.jp/

Firefox_Download

ダウンロードしたら、普通にインストールでOKです。


なお、初期状態だと、上段のメニューが表示されていませんが・・・
初期設定では上段メニューが表示されていません


Altキーを押すとメニューが現れます^^
altキーを押すとメニューが出現

簡潔軽量!2KB弱でレスポンシブデザインを実装するCSS (グリッドシステム風)
問題となった、GMOとくとくポイントバー [カラーミーショップ] GMOとくとくポイントバーでレスポンシブレイアウトが崩れる不具合
Firefox Developer Edition 不具合情報(主要アドオン×2との不和)
Flexboxでレスポンシブ、ゆるいCSSフレームワーク (グリッドシステム風)
[jQuery] レスポンシブ:複数横並びdiv枠の高さを取得、最大値に揃える
エックスサーバー+WordPressにPHP7導入 ⇒ 問題なく動いてる&速くなった気が【PEAR追記あり】
[UX] モバイルアンフレンドリーな箇所の修正:Googleからの是正勧告
レスポンシブ制作手法、CSS3のFlexboxに移行がヨサゲ… Android4.3以前の割合が減ったら

Name * (必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

í
up