SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

レスポンシブデザインの確認が簡単に出来るChromeのデベロッパーツールの使い方

こんにちは、開発チームの田中です。普段はレスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」に携わっています。

今回は、レスポンシブデザインの確認が簡単に出来る、Chromeのデベロッパーツールの使い方についてお話していきます。

レスポンシブデザインでWebサイトを制作する際は色々なデバイスの画面幅を考慮し、それらのデバイスできちんとデザインが崩れていないか確認する必要があります。

しかし、たくさんの画面幅のデバイスが発売されており、確認するためにそれぞれの画面幅の端末をすべて購入して確認するというのは現実的ではありません。

そんな時に使えるChromeのデベロッパーツールを使った簡単なレスポンシブデザインの確認方法をご紹介します。

Chrome デベロッパーツールでの確認

Chromeのデベロッパーツールでは、さまざまな画面サイズの確認を以下の手順で行うことが出来ます。

Chromeで確認したいページを表示する

website1

「Ctrl + Shift + i」または「F12」キー(Macの場合は「option + command + i」)でデベロッパーツールを表示する

chromedevtool1

赤枠で囲われた箇所がデベロッパーツールと呼ばれる箇所です。

「Ctrl + Shift + M」またはデバイスアイコンをクリックする

chromedevtool2

赤枠で囲われた箇所がデバイスアイコンです。

クリックすると以下のようにWebページがスマートフォンに切り替わります。

chromedevtool3

元に戻したいときは再度デバイスアイコンをクリックします。

表示の確認をしたいデバイスを選択する

chromedevtool4

赤枠の箇所を選択すると、Chromeのデベロッパーツールで確認が出来る端末の一覧が表示されます。

確認したいデバイスを選択すれば完了です。

その他の機能

デバイスの横表示で確認してみる

スマートフォンは横向きにWebページを閲覧することが出来ます。

Chromeのデベロッパーツールでは横表示の場合での確認も行うことが出来ます。

rotate2

赤枠で囲われたアイコンをクリックすると、表示されているデバイスが回転し横表示を確認することが出来ます。

元に戻す場合はもう一度アイコンをクリックしてください。

確認できる端末を増やしてみる

デバイスの選択欄に、確認したい端末がない場合は確認したいデバイスを増やすことが出来ます。

edit2

赤枠のEditを選択します。

すると以下のように右側のデベロッパーツールにデバイスの一覧が出てきます。

device

その中から見たいデバイスにチェックを入れると確認できる端末が増えます。

独自の画面サイズでチェックしてみる

端末の画面サイズを直接指定して確認を行うこともできます。

赤枠のResponsiveを選択します。

responsibe2

すると画面サイズが設定されているテキストボックスの数値が編集可能になります。

scale1

こちらに任意のサイズを入力して確認を行うことが出来ます。

まとめ

今回は、レスポンシブデザインで制作したWebサイトのデザインを確認する方法について紹介しました。

すぐにデザインの確認をしたい場合には、この機能を使って試してみてはいかがでしょうか。

シンメトリックでは、レスポンシブと同様のマルチデバイス対応を実現する「スマホのサイト制作。PCは自動変換 | alter.js」を提供しています。
スマホ中心のサイト制作、リニューアルをお考えでしたら、ぜひ使ってみてください。

また、alter.jsを使用したLP制作サービス「スマホからLP制作」も展開しています。
こちらもご興味ありましたら是非お問い合わせください。

Page Top