ブログを書いた際に、
[say]スマホで確認するのがめんどくさい！！[/say]
と思ったことはありませんか？？
僕はつい最近まですごくめんどくさいと感じていました。
めんどくさのあまり確認せずに投稿して、後からスマホで見てみると
[say]あれ？？スマホで見るとここがおかしい・・・[/say]
なんてことも度々起きていました。
しかし、最近になってパソコンでもスマホの画面を確認出来る方法を僕は知りました・・・
しかも、その方法はHTMLやCSSなんかに詳しくない僕でも、かんたんでしかもすぐに出来ちゃうとても便利な方法でした。
今回はその方法について僕自身の備忘録も兼ねてご紹介をしていきたいと思います。
もくじ
スマホサイズの画面を表示するかんたんな方法
そのかんたんな方法とはGoogleクロームに搭載されているGoogleデベロッパーツールを利用することです。
Googleデベロッパーツールを使うことで、初心者でもかんたんにパソコンでスマホサイズの画面を表示することが可能になります。
デベロッパーツールって難しい？？
[box class=”box23″]
Googleデベロッパーツールって難しそう・・・
[/box]
って思っているあなたでも、スマホサイズの画面を表示させる機能に関してはそこまで難しくはありません。
僕自身もデベロッパーツールに関して詳しいわけではありませんが、最初でもわずか２～３分程度で表示させることが出来ました！！
３ステップで初心者でもかんたん
デベロッパーツールを使った方法は、
たったの３ステップ
たったの３工程でスマホサイズの画面がPCでも見れるようになります。
スマホ画面を表示させる方法
[timeline] [tl label=’手順1′ title=’デベロッパーツールを起動する’]
まずはデベロッパーツールを起動します。
起動の方法はいくつかあるのですが、一番かんたんな方法はキーボードのF12で表示させる方法です。
この方法はWindowsに限られますが、Macでも、「⌘ + Opt + I」のショートカットで起動することが出来ます。
デベロッパーツールはたったのこれだけで起動完了です。[/tl] [tl label=’手順2′ title=’スマホサイズに変更する’]
次にスマホサイズに画面を変更していきます。
デベロッパーツールを起動すると、左上の部分にスマホのようなマークが表示されています。正確にはデバイスモードと言います。
そのスマホマーク（デバイスモード）を左クリックすると、今までパソコンサイズだった画面が、スマホのサイズに切り替わって表示されるようになります。[/tl] [tl label=’手順3′ title=’ページの更新’]
スマホのサイズに表示はされましたが、そのままだと広告や一部の表示がパソコンサイズのままとなってしまいます。
そこで今表示しているページを再読み込みすることで、正常のスマホサイズの画面となります。
[/tl] [/timeline]
元のパソコン画面に戻すのもかんたん
スマホサイズの画面を確認したら、
元に戻す操作もとってもかんたん
デバイスモードを終了させる、もしくはデベロッパーツールを終了させることで元のパソコンサイズの表示に戻すことが出来ます。
デバイスモードを終了するには、さっきクリックしたスマホマーク（デバイスモード）を再びクリックするだけ。
デベロッパーツールを終了させる場合には、右端にあるクローズボタン（×マーク）をクリック。
もしくはF12ボタンを押すことで終了することが出来ます。
スマホに合わせてサイズも変更可能
デバイスモードの機能はスマホサイズに表示させるだけではなく、スマホの機種ごとの表示も確認することが出来ます。
例えば、iPhoneのサイズで表示させたい場合には、上部に表示されてある「Responsive」をクリックすることで機種ごとのサイズに変更が出来ます。
iPhoneだけでなく、android端末にも対応していて少し古い機種であれば「Edit…」の部分をクリックすることでandroid端末も追加することが可能です。
また、この中に無い端末であっても個別に登録が出来るので、自分が表示させたい画面サイズスマホも登録することが出来ます。
自分のブログがどのスマホでよく見られているか？
ちなみに自分のブログがどのスマホで見られているか確認することも可能です。
Googleアナリティクスを使っている方限定にはなってしまいますが、
アナリティクスメニュー→モバイル→デバイス
の順にクリックしていくと、自分のブログが一番どのデバイスで読まれているかを確認することが出来ます。
まとめ
今回は、パソコンでスマホサイズの画面を表示させる方法について説明しましたが、デベロッパーツールには他にも色々な使い方が出来ます。
例えば、
[list class=”li-yubi li-mainbdr main-c-before”]
- HTMLとCSSのエラー確認
- CSSの変更テスト
- コードの確認
[/list]
内容は少し難しくなっていくのですが、自分のブログのHTMLやCSSのエラーが出てないかチェックを行ったり
ブログのデザインを変更する際にCSS書き換えるわけですが、その書き換えのテストもデベロッパーツールを使って行うことが出来ます。
また、HTMLやCSSがどのように構築されているか確認することも出来るので、HTMLやCSSを勉強したいときなどにも大きく活用できます。
この辺はブログを書く際に必ず必要なスキルというわけではありませんが、覚えておいて損は無いので余裕があるときなどに一度勉強してみるのもおおかもしれません。
