Chromeでスマホ表示を確認する方法～User Agentの操作がまた変わった～
こんばんは！
凄く・・・お久しぶりです。。
さて、久々にブログを書くにあたり、出だしをどう書こうかずっと悩んでおりました。
ホームページやブログをPCからでもちょっとすぐに確認したい！
そんな時に便利なのが、Chromeブラウザ！
標準で装備されている「User Agent」で簡単にスマホ版を確認することが出来るのです！
それでは早速やってみましょう！
①Chromeのデベロッパーツールを開く
・キーボードの［F12］キーを押す
※その他マウスの右クリック＞要素を検証をクリックでもOK＾＾
↓このような画面が出たでしょうか？
②更に開く！！
下の画像の赤印の所に ＞三 みたいなアイコンがあるかと思います。クリックします
※すごく・・・見難いです。。
③Emulationタブを開く！
下の画像が出る前にもしかしたらスマホアイコンみたいな画像が出てるかもしれません。気にせずスマホアイコンをクリックしましょう
そして下の画像の赤枠部分をクリック（既に開いてるかも）
④スマホのタイプ（ユーザー・エージェント）を選ぶ！
赤枠のModel：という右隣に＜Select model＞と書かれている枠をクリックすると
↓画像のようにスマホのタイプ（ユーザー・エージェント）がズラリと表示されます。
・・・・凄く。。小さい。。です
⑤サイズをそろえる
設定しましょう！簡単です！
ブラウザの上部にある更新ボタンをクリックします
そして、下の方にあるチェックボックスを上から二つをチェックします。
※もしかしたら、下のチェックを外す方が正しい手順かも＾＾；
PCに戻したい時は↑の画像の赤枠の左にある
Resetというボタンを押せばOKです＾＾
⑥マウスポインタが●になった！？
下の画像ではキャプチャー取れてませんが
グレーの丸いボヤっとしたマウスポインタになってる場合があります。
これはスマホ制作によくある、Touch Eventでないとスマホ向けサイトのボタンが反応しないことがあるので、それを見る為だそうです（調べた＾＾；）
↑画像の赤枠のチェックを外すと●のマウスポインタがいつもの
矢印タイプに戻ります＾＾
久々にUser Agentをいじることがあって、
見てみたらすっかり様変わりしてたのでちょっと焦りました。
何かのお役に立てればこれ幸い。
ではまた！
