今日の人気記事

  1. Sublime Text 3 の日本語化 - Japanize のインストール
  2. Sublime Text - Package Control のインストール
  3. Windows - Sublime Text 3 のダウンロードとインストール
  4. Chrome拡張機能「Window Resizer」 - ブラウザをデバイスごとの画面サイズへ変更
  5. Sublime Text 3 - インデントの設定(スペース・タブ)

Chrome デベロッパーツール - レスポンシブ表示の確認

スポンサーリンク

Google Chrome のデベロッパーツールを使って、Web サイトのレスポンシブ表示を確認する方法を紹介します。

iPhone の登場くらいから?

Web サイトを作成する際に Internet Explorer、Google Chrome、Firefox などのさまざまなブラウザーだけではなく、iPhone、Android、Kindle……などのスマートフォンやタブレットでも表示を確認することが必須になってきましたね(めんどくさい)。

実機で確認することも大切ですが、まずは Google Chrome のデベロッパーツールを使って、Web サイトのレスポンシブ表示を確認しましょう。

Chrome デベロッパーツール - レスポンシブ表示の確認

それでは確認方法をみていきます。

スポンサーリンク

google-chrome-developer-tools-01
Chrome で表示を確認する Web サイトへアクセスし、右上の「≡」アイコンをクリックします。

google-chrome-developer-tools-02
すると、このようにメニューが表示されるので「その他のツール」から

google-chrome-developer-tools-03
「デベロッパーツール」をクリックします。

google-chrome-developer-tools-04
すると、このような表示に切り替わるので、左上の「Device」をクリックします。

google-chrome-developer-tools-05
すると、このように Kindle、iPhone、iPad、Nexus といったさまざまなスマートフォンやタブレットのデバイスが表示されるので、どれかを選択しましょう。

※ ここでは「Apple iPhone 6」を選択しました。

google-chrome-developer-tools-06
すると、画面が「Apple iPhone 6」のサイズへ切り替わるので、ページを更新しましょう。

google-chrome-developer-tools-07
これで サイトの表示を確認することができます。

google-chrome-developer-tools-08
矢印で描かれた丸っぽいアイコンをクリックすると、

google-chrome-developer-tools-09
画面が90度回転するので、水平方向の表示を確認することができます。

デバイスを切り替えながら、さまざまなデバイスでの表示を確認しましょう。

スポンサーリンク