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

s3Slider.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も、画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 今回チャレンジしてみたのは、「s3Slider.js」を使ったFlashのよ …

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …

no image

WordPressで「ブルートフォースアタック」や辞書攻撃にあった時にやってみたこと。

この記事は約 1 分で読めます。 昨年(2013年8月)、ロリポップのレンタルサーバーでWordPressサイトへの改ざん事件がありました。 その後も、「ブルートフォースアタック」や辞書攻撃があってい …

no image

WordPress カテゴリごとに部分的デザインを変えたい時

この記事は約 1 分で読めます。 WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。 ページまるごとデザイン(表示)を変える場合と、 …

no image

WordPressプラグイン「WP-PageNavi」でページナビゲーションを表示♪

この記事は約 1 分で読めます。 このサイトを作り始めて1年になりました。 WordPress初心者で、毎日「?」の繰り返しでした。 そんな私も、気がつくと・・・投稿記事が100を超え、「新しい記事へ …