この記事は533秒で読み終わります。

こんにちは。

【SE小規模社長簡単】の

山本です。

 

今回は、

「ChromeでレスポンシブWebの表示確認方法」

について、私、

【SE小規模社長簡単】の山本が

お話しします。

 

ChromeでレスポンシブWebの表示確認方法

レスポンシブWebとは

パソコンを使って、

自分のサイト(ブログ、ホームページ)を

作成しているとき、

 

貴方は、パソコンだけの表示で

満足していませんか?

 

実は、ご存知の通り、

今の世の中で、

インターネットを接続して

サイトを表示できる媒体は

パソコンだけではありません。

 

スマホ、タブレット、iPhone、

ガラケー、ゲーム機、テレビ等

 

様々な媒体でサイトが見られます。

 

その時に、

それぞれの媒体が、

異なる画面サイズだということも

ご存知の方も多いと思います。

 

当然ですよね、

大きさが違うのは、

一目瞭然です。

 

以前は、

サイトを運営していると、

一番最初に設定することが、

表示サイズでした。

 

今も、パソコン用のサイズを

指定すると思いますが、

 

今では、デスクトップPC、

ノートPC、スマホやiPhone、

タブレットなどに対応したサイズを

それぞれ指定するようになりました。

 

このような、媒体別に表示を

切り替える仕組みを備えたサイトを

レスポンシブWeb対応と言っています。

 

 

サイズは勿論ですが、

メニューをアコーディオンに切り替えたり、

 

WordPressだと、ウィジェットの

表示方法や、ヘッダー・フッターの

表示方法を変えたり、

 

媒体によって項目を非表示にするなど、

いろいろと変化させることができます。

 

レスポンシブWebの確認方法

それぞれの媒体に合った

サイズを指定したり、

表示方法を設定したりしたら、

 

今度は、その設定通りに

ちゃんと表示されているかどうか、

確認する必要がありますね。

 

それぞれの媒体を持っていれば、

表示して確認できますが、

 

持っていない人が殆どです。

 

例え持っていたとしても、

いちいち媒体で表示確認を

していたのでは、面倒ですね。

 

そこで、今では、

いろいろなツールが登場しています。

 

表示確認できるサイトもありますね。

 

私は、個人的には

Google Chromeの

デベロッパー・ツールズを使っています。

 

普段使っているブラウザが

Chromeなので、

 

確認したいサイトを表示して

キーを押して、マウスを操作するだけで、

表示確認できるので、とても便利です。

 

いちいち確認するために

確認のためのサイトを開いて、

URLをコピペするなどという

 

手間な操作も必要がないし、

使い慣れているという点でも、

一押しの確認方法です。^^

 

Google Chromeで確認する手順

それでは、早速、

Google Chromeを使って、

確認する手順を解説していきたいと思います。

 

まずは、Google Chromeが

インストールされていなくてはいけません。

 

インストール方法は、当サイト記事で、

世界シェアNo1のブラウザ「Google Chrome」

の最後の方で、紹介していますので、

ご確認ください。

それではまず、

Google Chromeを起動してください。

(シンプルな状態が、いいと思ったので、

シークレットモードで表示しています。)

 

 

 


レスポンシブWebの表示確認をしたいサイトを

表示します。

(当サイトのトップページを例とします。(笑))

 

 

 

 

確認したいサイトが表示されている状態で、

キーボードのF12キーを押します。

または、マウス操作で、

 

「①Google Chromeの設定」→

「②その他のツール(L)」→

「③デベロッパー ツール」

をクリックします。

 

 

 

デベロッパー ツール画面が表示されたら、

右上の「Toggle device toolbar」アイコンを

クリックします。

 

 

 

 

この様に、表示が変わります。

 

 

 

 

 

 

表示する媒体を変更するには、

上部の現在表示している

媒体名をクリックし、

媒体名を選択することで、

切り替わります。

 

表示したい媒体名がない場合は

追加できます。

 

 

プルダウンメニューの一番下の

「Edit」をクリックします。

 

 

 

 

 

ここでは、「Kindle Fire HDX」を

選択しました。

 

 

 

 

 

画像の様に「Kindle Fire HDX」が

追加表示されました。

 

 

 

 

如何でしたか、

デベロッパー ツールを使うと

他にもいろいろな確認ができます。

 

CSSのデザイン確認をしたり、

表示されているCSSのIDやClassなどを

特定して、表示中のソースを

変更してテスト確認ができたり、

 

高度なプログラムのテスト確認なども

出来るんですよ。

 

是非使ってみてください。

 

今回は、

「ChromeでレスポンシブWebの

表示確認方法」

について、

 

【SE小規模社長簡単】の山本が

お届けいたしました。

 

 

次回も役立つ情報をお届けいたします。

 

 

最後までご覧いただきありがとうございました。

 

 

貴方の成功を心から願っています。