[GoogleChrome]PCからウェブサイトを仮想スマホ表示にする

PC版GoogleChromeから、ウェブサイトをスマホで見たとき、どんな感じで表示されるか!?

仮想的に確認することが出来る機能を紹介/解説します。

 

~この記事は、こんな方におすすめ!~

・PCとスマホ、どちらにも配慮したサイトを作りたい

・PCとスマホで別々にサイトレイアウトを確認するのが面倒

・スマホ用のサイトをPCで作りたい

 

紹介するのは、

GoogleChromeのトグル・デバイス・ツールバーという機能になります。

 

どんなことができるのか、一言でまとめると、サイトレイアウトの検証を行うことができます。

PCとスマホ、どちらにも適したサイトレイアウトにしたい場合に、とても役に立つ機能です。

 

僕のようなブロガーだけでなく、

ウェブサイトを管理されている全ての方に有用な機能ですので、圧倒的におすすめです。

 

さらに、GoogleChromeの機能なので、特にソフトなどは必要ありません。もちろん無料。

操作も、非情に簡単! 一度使えば覚えられると思います。

 

それでは、解説していきます。

 

スポンサーリンク

■PC版GoogleChromeでサイトをスマホ表示にする

解説では、当サイト ZENKAI BLOGのトップページをスマホ表示にしてみます。

 

Chromeで当サイトのトップページを開いた状態から、

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

 

すると、Chromeの画面右側に何やらメニューが開きます。

《画像1》


こちらは、デベロッパー・モードと言って、サイトのプログラムを確認できる画面になります。

今回は、その中の機能の一つ、トグル・デバイス・ツールバーを使います。

 

《画像1》を参照。

・・・スマホのアイコンをクリックします。


左側のサイト表示が切り替わります。

 

《画像2》

《画像2》を参照。

・・・[Responsive]と表示された部分をクリックします。


そうすると、ドロップダウンリストが開きます。

 

《画像3》

《画像3》を参照。

・・・こちらのリストでは、スマホの機種を選ぶことができます。対象機種名をクリック。

解説では、[Galaxy S5]を選択します。

 

《画像4》

《画像4》を確認。

・・・Galaxy S5の表示に切り替わりました。

左側のサイト表示をスクロールしていくと、サイトの下の方まで見れます。


ここで、オブジェクトのはみ出しなど、レイアウトが崩れていないか、確認することができます。

確認が終わったら、またキーボードの [F12]キー を押しましょう。

 

《画像5》

 

スマホ表示を終了して、通常の画面に戻りました。

 

以上です。 圧倒的に簡単!

2回の[F12キー]と、たった3回のクリックで完了。

 

僕自身、この機能を知ったのはつい最近のことです。

ただ、あまりに簡単なので、すぐ覚えてしまいました。

今後も時短、作業効率アップに使っていくことでしょう。

 

今回は、PCからウェブサイトを仮想スマホ表示にするGoogleChromeの機能、を解説してきました。

 

あまりに簡単に出来てしまうので、記事としても短くなっちゃいました。

簡潔にわかりやすく、短く。 非常に良しです(^^)

 

それでは、また!

スポンサーリンク