【ツール】レスポンシブサイトの確認に便利な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サイトを制作いたしました。南国ムードあふれる癒し系美容サロンをテーマにスタッフの笑顔で出迎えることができるデザインにいたしました。 クライアント美容室トップスタイル様 U...続きを読む

2015.04.08WEBサイト制作美容室

【WP】ログインページをカスタマイズする方法

WordPressのログインページはプラグインなどを利用してカスタマイズすることができます。 今回は、プラグインを使わずにアクションフックを利用してWordPressのログインページで利用されるCSSをカスタマイズしてオリジナルのデザインに変更する方法をご紹介します。 ...続きを読む

2015.02.25WordPress

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー

【WP】WordPress5.0の編集エディターを旧バージョンに戻す方法

WordPressのバージョンが、これまでの4.0の系統から5.0系統の最新版へのリリースとなりました。 安全性やバグの修正はもちろんですが、今回、5.0系統の最新リリースで大きく変わったのが投稿時の編集エディターとして「Gutenberg」が標準採用されたことだと思います...続きを読む

2019.02.13WordPress

【WP】ウェブサイトのパフォーマンスを高めるためのプラグイン

Googleよりウェブサイトの制作・管理を行うウェブマスター向けのガイドラインが告知されております。このガイドラインの目的は「ガイドラインに沿ってサイトを作成すると、Google がサイトを認識し、インデックスに登録し、ランク付けをするプロセスをスムーズにおこなう手助けとなります...続きを読む

2015.03.23WordPress