スマホ表示のチェックに便利なChromeデベロッパーツールの基本的な使い方

もしものショップを作ったら、スマートフォンでどう見えるのかをチェックしないといけません。その時にとても便利な「Chromeデベロッパーツール」の使い方です。

また、これはそのページのHTMLやCSSを変えるとどうなるかを擬似的に見ることもできるスゴイツールです。WEBの開発者はほぼこのツールを利用していますので、慣れてきたらそんなことにもチャレンジしてみてください。

開発者ツール

ここではChromeのブラウザで使う基本的な部分のみをご説明しておきます。初心者の方もぜひ押さえておいてくださいね。ちなみに、IEやFirefoxでも同じく「F12」キーを押すと同じようなツールが出てきます。

スポンサーリンク

デベロッパーツールを立ち上げる

チェックしたいページを開いた状態で、キーボードの「F12」キーを押します。

または、画面の上で右クリックして「要素を検証」をクリック。すると下のような画面になります。

Chromeデベロッパーツール

開いているページの要素(HTMLやCSSなど)が分割されたウィンドウに表示されます。

上の図のように左右ではなく、上下に分割されている場合は、3つの点のボタン(下図の赤丸の部分)をクリックすると切り替えるメニューが出てきます。

developer6

そこで「Doc to right」を選んでください。左右に分割しておく方が見やすいと思います。

スマホ表示をチェックする方法

画面の上部にスマホの形をしたボタンがありますのでクリックします。すると下記のような画面になり、左上にある「Device」のプルダウンメニューからデバイスを選択することができます。

Chromeデベロッパーツール

ここでいうデバイスとは、iPhone5・6、iPad、iPad mini、Amazon Kindle Fire、Samsung Galaxy noteやGalaxy S4などのスマホやタブレット機器のこと。

これを切り替えることで、それぞれのデバイスでどう見えるかをチェックすることができます。

今、スマホでは圧倒的にiPhoneのユーザーが多いですので、iPhone5と6は必ずチェックしておいてくださいね。

また、「デバイス」の右にある「Portrait」と「Landscape」ボタンを切り替えることで、スマホを縦にしたときと横にしたときの表示が確認できます。

【縦の画面】

Chromeデベロッパーツール

【横の画面】

Chromeデベロッパーツール

スマホでは、画面を横にして見る人も結構いますのでお忘れなく。

デベロッパーツールの終了

スマホ表示のチェックなどが終わったら、右上の「×」(Close)ボタンをクリックするか、もう一度「F12」キーを押すと、デベロッパーツールが終了できます。

ただ、やはり実際のスマホで見てみると、このツールの表示とは微妙に違っていたりします。とりあえずは、お手持ちのスマホでリアルに確認することも忘れないでください。

まとめ

以前、スマホ表示をチェックするのに「Responsinator」というツールをご紹介しました。

>レスポンシブデザインの見え方を簡単にチェックできるシミュレーター【Responsinator】

Responsinatorは、各デバイス毎にどう見えるのかを一覧でチェックすることができますが、チェックしたいURLをコピペする手間がいるのがネック。

一方Chromeデベロッパーツールでは、いちいちデバイスを切り替える手間はありますが、チェックしたいページで「F12」を押すだけですので、そのあたりはとても楽。

ゆくゆくはページのソースの情報などを見れると幅が広がってきますので、Chromeデベロッパーツールに慣れておくことをおすすめします。

スポンサーリンク