Webの記録

パソコンでスマホやタブレットの表示を確認出来るGoogle Choromeデベロッパーツール

投稿日:

この記事は約 2 分で読めます。

s00229Webサイトを制作する時、コーディングしながら都度いろんなブラウザで表示確認をします。
レスポンシブサイトとなると、今まで以上に表示をいろいろ確認しながら・・・の作業になります。
実機で表示テストをした方が確実なのですが、ちょっと確認したい時にパッと手軽に使える便利なツールがあったのでここにメモします。
Google Choromeのデベロッパーツールが便利です!

簡単な手順

1.Google Choromeデベロッパーツールを開く

見たいWebページを表示させた後に、Google Choromeデベロッパーツールを開きます。以下の3通りの方法で簡単に開けました。

  • 画面上で右クリック→「要素を検証」をクリック
  • (Winの場合)「Ctrl」+「Shift」+「i」
  • (Macの場合)「Command」+「Option」+「i」

試しにAmazonのWebサイトを表示確認してみることにします。

amazonで表示を試してみる

2.画面右下の歯車のマークをクリックする

画面の右下をよ~く見てください

画面右下の歯車のマークをクリック

歯車のマークがありました!コレをクリックです。

歯車のマーク

3.Settingの設定をして、表示確認してみる

「Setting」の設定は、「Overrides」をクリックして、「User Agent」と「Device metrics」部分をクリックしてチェックマークを入れます。その後、見たい画面サイズを選択します。

スマートフォンでの表示に設定してみる

iPhone5での表示を試しに見てみました。

iPhone5での表示を確認

実際に使ってみて

先日、通常のサイトからレスポンシブサイトにしてみたサイトで、Choromeデペロッパーツールを使って表示確認をしてみました。

参考記事:レスポンシブサイト制作にチャレンジ。

Choromeデペロッパーツールで表示確認
Choromeデペロッパーツールで表示確認

簡単にPCブラウザで、スマートフォンやタブレットの表示を確認する事ができました!

ただし、PCブラウザでの表示なので・・・最終的には実機で確認しないと・・・です。

コーディング途中での簡易的な表示確認には、「Google Choromeデベロッパーツール」はとても便利だと思います!

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WordPressプラグイン「Jetpack」のギャラリーがスマホで表示が崩れたとき

この記事は約 1 分で読めます。WordPressのプラグイン「Jetpack」はとても多機能で、ホントにいろんなコトができて便利。 しかし、たくさんの画像をギャラリー表示をした場合、スマホのように画 …

no image

WordPressログイン画面にオリジナルロゴを表示させる

この記事は約 1 分で読めます。 パッとひと目でそのサイトだと分かりやすくしたいなぁと思って、ログイン画面のロゴをオリジナルに変更してみました。 WordPressのバージョンによって、ロゴ部分のサイ …

no image

WordPress記事中の文章をコピーしたら管理者にお知らせしてくれるプラグイン「Check Copy Contents(CCC)」を試してみた

この記事は約 2 分で読めます。 私の過去記事で人気なのが、「画像のコピーガード」。画像を盗用されることに対して対策を打ちたい方がたくさんいらっしゃるのでしょう。 もしこれが記事中の文章においても、コ …

no image

別窓でリンク先のページをポップアップで開きたいとき

この記事は約 1 分で読めます。 よくリンク設定で、「target=”_blank”」を入れて別タブで開くようにすることは多いですが・・・。 今回、たまたまポップアップでリンク …

no image

Worepressのロゴ、ボタン、カラースキームなどの公式データをメモ

この記事は約 1 分で読めます。 WordPressのロゴ、ボタン、カラースキームなど、公式データがダウンロード出来るようになっていたので、メモ。 ちゃんと、あったんですね!!しかも、かなり種類が豊富 …