PC版GoogleChromeから、ウェブサイトをスマホで見たとき、どんな感じで表示されるか！？
仮想的に確認することが出来る機能を紹介／解説します。
・PCとスマホ、どちらにも配慮したサイトを作りたい
・PCとスマホで別々にサイトレイアウトを確認するのが面倒
・スマホ用のサイトをPCで作りたい
紹介するのは、
GoogleChromeのトグル・デバイス・ツールバーという機能になります。
どんなことができるのか、一言でまとめると、「サイトレイアウトの検証を行うことができます。」
PCとスマホ、どちらにも適したサイトレイアウトにしたい場合に、とても役に立つ機能です。
僕のようなブロガーだけでなく、
ウェブサイトを管理されている全ての方に有用な機能ですので、圧倒的におすすめです。
さらに、GoogleChromeの機能なので、特にソフトなどは必要ありません。もちろん無料。
操作も、非情に簡単！ 一度使えば覚えられると思います。
それでは、解説していきます。
スポンサーリンク
■PC版GoogleChromeでサイトをスマホ表示にする
解説では、当サイト ZENKAI BLOGのトップページをスマホ表示にしてみます。
Chromeで当サイトのトップページを開いた状態から、
キーボードの [F12]キー を押します。
すると、Chromeの画面右側に何やらメニューが開きます。
こちらは、デベロッパー・モードと言って、サイトのプログラムを確認できる画面になります。
今回は、その中の機能の一つ、トグル・デバイス・ツールバーを使います。
《画像1》を参照。
①・・・スマホのアイコンをクリックします。
左側のサイト表示が切り替わります。
《画像2》を参照。
②・・・[Responsive]と表示された部分をクリックします。
そうすると、ドロップダウンリストが開きます。
《画像3》を参照。
③・・・こちらのリストでは、スマホの機種を選ぶことができます。対象機種名をクリック。
解説では、[Galaxy S5]を選択します。
《画像4》を確認。
④・・・Galaxy S5の表示に切り替わりました。
左側のサイト表示をスクロールしていくと、サイトの下の方まで見れます。
ここで、オブジェクトのはみ出しなど、レイアウトが崩れていないか、確認することができます。
確認が終わったら、またキーボードの [F12]キー を押しましょう。
《画像5》
スマホ表示を終了して、通常の画面に戻りました。
以上です。 圧倒的に簡単！
2回の[F12キー]と、たった3回のクリックで完了。
僕自身、この機能を知ったのはつい最近のことです。
ただ、あまりに簡単なので、すぐ覚えてしまいました。
今後も時短、作業効率アップに使っていくことでしょう。
今回は、PCからウェブサイトを仮想スマホ表示にするGoogleChromeの機能、を解説してきました。
あまりに簡単に出来てしまうので、記事としても短くなっちゃいました。
簡潔にわかりやすく、短く。 非常に良しです(^^)
それでは、また！
スポンサーリンク