ブラウザの表示確認に...|独学でWebデザインの勉強をする人のためのまとめサイトです。


  • レスポンシブWebデザイン講座 レスポンシブ予備知識編(無料公開中)

ブラウザの表示確認について

レスポンシブWebデザインの制作を進める上で、表示確認をするための便利なツールがインターネット上にありますが、そのほとんどが、サーバーにデータをアップロードして、確認するものです。
(2015年11月現在)

つまり、URLを入力しないと確認できないということです。

講座の進行上、1回1回その作業を繰り返すのは効率が悪いので、講座内では簡易的にPCの画面サイズを変更したり、グーグルクロームのデベロッパーツールを利用しながら表示確認していきます。

完全な表示確認ができるツールではありませんので、講座の区切りごとに実機での表示も合わせて確認していこうと思います。

グーグルクロームのデベロッパーツール使い方は動画で解説しています。

追加解説

2016年4月現在、デベロッパーツールが新しくなっていましたので、変更点を追加解説しました。

レスポンシブWebデザイン表示確認ツール

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

https://developer.mozilla.org/ja/docs/Tools/Responsive_Design_View

Firefoxにもブラウザの標準機能でレスポンシブ表示を確認できるツールがあります。

使いやすさとしてはこちらも人気のようです。

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

参考になるサイト

http://funnis.net/blog/tool/firefox-responsivedesignview/

Viewport resizer

http://lab.maltewassermann.com/viewport-resizer/

ブラウザ上で動作するブックマークレットです。

Windows/Macに対応しています。

ツールをブックマークバーにドラッグしておけば、その時、表示しているウェブサイトをデバイスサイズごとに変更して確認できます。

参考になるサイト
http://coliss.com/articles/build-websites/operation/javascript/bookmarklet-viewport-resizer.html

Mobilizer

http://mobile1st.com/

パソコンでAndroid・iPhone・BlackBerryなどスマートフォン用のモバイルサイトを見られる無料スマートフォンエミュレーター。

こちらは、インストール中に英語の広告などが表示されたり、環境によっては上手くダウンロードできなかったり、動作が重いという不都合があります。

Chrome拡張機能 Window Resizer

Chromeウェブストア Window Resizer
https://chrome.google.com/webstore/category/apps?hl=ja

こちらはChromeの拡張機能を追加するだけで、リアルタイムでブラウザの横幅を確認できる機能ですが、2014年1月、Window Resizerにはマルウェアが含まれていることが発覚し、一時、Chromeウェブストアからダウンロード出来なくなっていました。

現在、2015年11月現在は改善されてダウンロードできるようになっていますが、セキュリティ的な心配があるので講座では使用しません。

ご質問・メッセージは以下のフォームよりどうそ!

*
*
*
*


レスポンシブWebデザイン動画講座受講について

【初級編】【応用編】【練習問題】を受講するには、講座へのお申し込みが必要となります。


レスポンシブWebデザイン使い方講座詳細・お申し込みはこちら



Pagetop