【ツール】レスポンシブサイトの確認に便利な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

関連記事

【フォト】港町焼津の新年の漁船・大漁旗・富士山

静岡県焼津市では新年三ヶ日になると、漁船に大漁旗が掲げられた姿をみることができます。色とりどりの大漁旗が晴天の青空にとても映えます。天気の良い日は富士山と一緒にみることもできます。 フォトギャラリー ※写真をクリックすると拡大表示します。[gallery link="fi...続きを読む

2017.01.03フォトギャラリー

【WP】ワードプレスのカスタムメニュー機能を使う

WordPressではバージョン3.0より、管理画面内でメンテナンスができるカスタムメニューの機能が加わりました。WordPressで作成した固定ページや投稿記事のリンクをメニューに反映したり、動的にメニューを構築することができる便利な機能です。今回は、ワードプレスのカスタム...続きを読む

2015.08.18WordPress

【JavaScript】フォームの入力チェックができるライブラリ『Validatr』

お問い合わせフォームなどの入力フォームで入力された値をチェックや未入力をチェックする事ができるJavaScriptライブラリ『Validatr』をご紹介します。 『Validatr』はjQueryをベースに開発され、MIT License にて公開さております。電子メー...続きを読む

2015.02.14HTMLコーディング

【CSS】スタイルシートが適用される優先順位について

WEBサイトのデザインでは定番になっているCSS(カスケーディング・スタイル・シート)。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。 そうなると、同じ名前の宣言で異...続きを読む

2015.02.06HTMLコーディング

【WP】5段階評価ができる「Yet Another Stars Rating」の導入方法

商品などのレビューに評価として星がついているのを見かけることがあると思います。外部からの評価として商品購入の参考にもなります。 今回はWordPress上の記事に5つ星の評価をつけることができるプラグイン「Yet Another Stars Rating」の導入方法をご...続きを読む

2015.04.15WordPress