【ツール】レスポンシブサイトの確認に便利なViewportエミュレーター『Dimensions』

viewport-emulation-with-chrome

レスポンシブサイトを制作すると、PCやスマートフォン、タブレットでそれぞれ表示が異なるため、表示もそれぞれの端末に合わせたサイズでの確認が必要になります。

そこで便利なツールとして、Google Chromeのアプリに端末サイズごとのシミュレーションができる『Dimensions』があります。

『Dimensions』は、ブラウザ上でシミュレーションができ、端末のviewportを自由に設定することが可能です。一般的な端末の縦横サイズも登録されているので便利です。

スマートフォンやタブレットの横向き、縦向きの切り替えの表示も確認することができます。

Google for 『Dimensions』基本画面

『Dimensions』の基本画面。画面左上のURLを入力すると指定されたサイズ内にページが表示されます。定規もついているので調整の目安になります。

viewport-emulation-with-chrome-01

Google for 『Dimensions』端末選択

端末選択のプルダウンを選択すると代表的な端末を選択することができます。

viewport-emulation-with-chrome-02

Google for 『Dimensions』縦横切り替え

右上の『Rotate』ボタンをクリックするとスマートフォンやタブレット特有の縦向き横向きでの表示切替もシミュレーションすることができます。

viewport-emulation-with-chrome-03

関連記事

美容室グランディール様WEBサイトのリニューアル

富士宮市にある『美容室グランディール』様のWEBサイトのデザインをリニューアルいたしました。上質な空間を演出できるように、よりナチュラルな印象に、おしゃれで可愛らしい雰囲気のデザインに仕上がりました。 インスタグラムでの投稿と連携して、写真が表示されるようになっております。...続きを読む

2018.02.06WEBサイト制作リニューアル美容室

【無料】商用利用OKシームレステクスチャ「岩石(白玉石風)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。白玉石のような白色の石の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 ...続きを読む

2018.09.12シームレステクスチャ

【ソーシャルメディア】2004から2013年までのソーシャルメディアの成長

検索エンジンジャーナルによる2004から2013年までのソーシャルメディアの成長をあらわした図解です。( Search Engine Journal ) The Growth of Social Media v2.0 [INFOGRAPHIC] 図解をみてみると、...続きを読む

2015.02.17WEB

【WP】WordPressテーマファイルのページ階層早見表

WordPressでサイト構築するために必須となるテーマ。初めてWordPressのテーマのファイルをみるとそれぞれのファイルがどのように関連してサイトが構築されているのか難しく感じるかもしれません。 テーマをカスタマイズしたいとき、テーマを利用したいとき、テーマをより深く...続きを読む

2016.07.03WordPress

【CSS】Googleマップの埋め込み用HTMLコードをレスポンシブに対応させる

Googleマップで、埋め込み用HTMLコードを発行して、ブログやサイトに貼り付けて使うことがよくあると思います。 サイトがレスポンシブ対応の場合、本文中のGoogleマップが、要素からはみ出して見栄えが崩れたり、案内したい所在地のポインタが表示されないということがあります...続きを読む

2015.02.08HTMLコーディング