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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

Basic認証を簡単に設置する方法

この記事は約 1 分で読めます。 特定の人にだけ公開する場合、IDとパスワードを用意する「Basic認証」という方法でアクセス制限をするのができます。 「Basic認証」で必要な「.htaccess」 …

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。

no image

気になるブラウザサイズ。

この記事は約 1 分で読めます。最近、いくつかサイトを作らせて頂き・・・。 ちょっと他所のパソコンをいじらせて頂き、その画面表示にショックを受ける事がしばしば・・・。 日頃見ているパソコンと表示があん …

no image

iPad・iPhoneでレイアウトが崩れた時に試してみたこと

この記事は約 1 分で読めます。 今まではWebサイト制作は、PCでの表示だけを意識して作っていたのですが、最近iPadやiPhone・Androidでのアクセスが増えて、お仕事の依頼もPCだけでなく …

no image

scroller.jsで「するするスクロール」にチャレンジ♪

この記事は約 1 分で読めます。以前、yuga.jsを使ってページ内リンクを「するするスクロール」にチャレンジしました。 今回は、scroller.jsを使って同じような事をやってみたいと思います。 …