Web系の開発者であれば、RWD（レスポンシブウェブデザイン）という単語を
聞いたことがあると思います。
昨年、自社製品のWebページの作成時にRWDを意識したのですが、
その時に使用したHTMLのデバッグツールをご紹介します。
Google Chromeは標準でスマフォのエミュレート機能を備えています。
下記手順で簡単にスマフォエミュレートが可能です。
- [F12]キーを押下して Developer Tool を開く
- Hide drawerマーク(>≡)をクリックして drawer領域を開き、[Emulation]タブをクリック
[Emulation]タブが無ければ、下記の記事を確認してみてください。
デベロッパーツールにOverridesがない!?Google Chromeでユーザーエージェントの変え方 - ノンエンジニアの僕が僭越ながらもwebサービスについてああだこうだ言ってみたり作ってみたり
- モバイルマークが表示されていたら、モバイルマークをダブルクリック
- [Model]にエミュレートするデバイスを指定
- [F5]キーを押下して画面更新
→ スマフォの見た目になる
下記は私がRWDで作成してみたページです。
画面サイズを変えて遊んでみてください(^^)