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

関連記事

no image

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

この記事は約 1 分で読めます。 PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。 スマホからの見え方をチ …

no image

パンくずリストをGoogleの検索結果ページで表示させる方法

この記事は約 1 分で読めます。 Googleで検索をした時に、検索結果でサイトタイトルの下にパンくずリストが表示されているのを見かけたことはありませんか? 最近妙に気になって・・・(今頃?!)、私も …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

初心者のアクセス解析勉強メモ【用語と簡単にサイトをチェックしてみた】

この記事は約 1 分で読めます。 最近、興味があるのは・・・アクセス解析関係。 Webサイトを作った後、運営していくのにはやっぱり重要!アクセス解析をして、そのサイトの現在の状態を見て、それから目標を …

no image

WordPressプラグイン「Audio Player」でMP3音源を簡単に再生してみた

この記事は約 1 分で読めます。 WordPressでMP3オーディオプレーヤーを表示させてくれるプラグイン「Audio Player」を試してみました。 「Audio Player」は、Flashで …