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

関連記事

サロンドブー様で行われたテレビ撮影に密着しました

富士市にある美容室とエステサロンの『サロンドブー』様の写真撮影をいたしました。サロンドブー様でサービス提供している霧でかける新感覚のパーマシステム「プルームパーマ」のテレビ撮影があるとのことで、密着さいて撮影の様子や「プルームパーマ」の施術の様子を撮影いたしました。 ...続きを読む

2015.04.23フォトギャラリー

【JavaScript】マウスオーバーでTooltips(吹き出し)を表示するライブラリまとめ

グラフィカルユーザインタフェース(GUI)において普及した表現手法のひとつにTooltips(ツールチップ)と呼ばれるものがあります。カーソルを合わせたときに吹き出しなどの小さな枠が表示され、補足の説明が表示される表現方法です。 今回は、Tooltips(吹き出し)を実...続きを読む

2015.03.03HTMLコーディング

Google Chart API でQRコードを自動生成する方法

Google Chart APIはGoogleが提供しているグラフなどのイメージを作成してくれるAPIサービスです。URLに必要な値を与えるだけで、グラフなどのイメージを返してくれます。 主にグラフなどを作成することができるのですが、その機能のなかにQRコードを作成して...続きを読む

2015.03.09HTMLコーディング

【デザイン】ライセンスフリーのグラフィカルユーザインタフェーステンプレート

WEBサイトやパソコンの画面などに見られるメニューやボタンなどのグラフィカルユーザインタフェース(GUI)のテンプレートをまとめてみました。 Flat Style & iOS 7 Line Style UI Kit PSD フラットデザイン、iOS 7 イメー...続きを読む

2015.02.14インスピレーション

富士山本宮浅間大社「桜」フォトギャラリー

富士宮にある富士山本宮浅間大社で桜を見てきました。ちょうど天気もよく青空に映えるキレイな桜を写真に撮ることもできました。 富士山本宮浅間大社は、富士山の龍脈の気が留まる龍穴(大地の気がみなぎる場所)のパワースポットとして開運神社として知られています。 主祭神には、神界...続きを読む

2015.04.09フォトギャラリー