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

Facebookページをタイムラインに移行してみた♪

この記事は約 1 分で読めます。 2012年3月1日、Facebookページで大きな変化がありました! いままで「いいね!」を獲得する為に様々な方法がとられていましたが、「タイムライン化」になった事で …

no image

WordPressプラグイン「WP-Copyright-Protection」で右クリック・ドラック禁止でコピーガード

この記事は約 1 分で読めます。 以前、「右クリック禁止で画像のコピーガード」など、画像のお持ち帰りを禁止したい措置について記事を書きました。 3年ほど前の記事にもかかわらず、今も毎日閲覧数が多いです …

no image

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

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

no image

WordPressプラグイン「Easing Slider」でスライドショー簡単設置

この記事は約 1 分で読めます。 WordPressでカッコいいスライドショーを簡単に実現出来るプラグイン「Easing Slider」があったので、メモしておきます。 有料版もあるようですが、無料版 …

no image

画像最適化に便利な4つのツール

この記事は約 1 分で読めます。スマホを意識したWebページを作っていると、避けて通れない「画像最適化」。 昨年あたりから少しずつ使っていますが、見た目は変わらないのに軽量になるから不思議です! 私が …