記事書いたり更新はＰＣ，でも見るのはスマホ！
ブログやホームページやってる人はみんなこうじゃないかな？
どうも！いつまでも初心者ブロガー、あのアラタ@anoarataです！
ぼくはこれまで
記事をＰＣで書く
プレビューで都度チェック
公開
スマホで見た目を確認
変なところがあればＰＣで修正、更新
スマホで再度チェック
っていうフローで記事を書いていた。
めんどーくさかった
ああ…ＰＣで書いてる時点でスマホでどう表示されるか確認できたらなあ…。
ずっと思ってたけど、先日ようやく解決したからそれを今回、図解入りで発表したいと思います！
ＰＣブラウザ上でスマホ表示するならChromeで
ブラウザって色んな種類あるよね。その中で今回はGoogleChromeでのやり方を紹介します！
なぜなら１番カンタンだから！
他のメジャーなブラウザ、FireFox、ＩＥなどでもＰＣ上でホームページやブログをスマホ表示できるんだけど、方法がめんどーくさいんだ。
アドオン入れたり、長文の英数字、正確な比率を入力しなくちゃいけなかったり…。
パッと調べて思った。ちょっとめんどーだなとｗ
でもChromeはカンタン！
なので、ＰＣ上で画面をスマホ表示するならブラウザはGoogleChrome一択！
ＰＣブラウザ上でスマホ表示はＦ１２ぽちー
キーボードでＦ１２をポチると
こうなります。なんか右上にズラズラっと英数字がでてきたね。なんだコレって感じだね。
でも大丈夫！画像のマルでくくってあるボタンをポチっと押してみよう。すると
できたァァーーーーーー！
めっちゃカンタンやん…！なんやコレッッ！
●右の英数字のウィンドウを消すにはもう１度Ｆ１２をポチッ！
●ＰＣ表示に戻したい時は１枚目の画像のマルでくくった部分をポチッ！
で、できるよ！
ちなみに上はWindowsでの方法！Mac OS Xなら［Option］＋［Command］＋［I］キーを押してこの画面を呼び出せるよ！
その他のブラウザでの表示方法
一応、Chrome以外のブラウザでのスマホ表示方法も書いておくよ！
■Firefoxでの方法
「User Agent Switcher（ユーザーエージェントスイッチャー）」というアドオンを入れる
User Agent Switcherからインストール。
「Add to Firefox」をクリックするとインストールが始まる。
Firefoxを再起動。
「ツール」→「Defalt User Agent」→「iPhone 3.0」をクリック
F5キーを押して画面を更新
画面の幅をスマホ幅くらいまで縮める
■Internet Explorardでの方法
F12キーを押して開発者ツールを開く
「エミュレーション」をクリック
「ユーザーエージェント」を「カスタム」にする
「カスタム文字列」に以下を入力
Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A306 Safari/6531.22.7
画面の幅をスマホ幅くらいまで縮める
以上！
引用させて頂いたサイト様はコチラです。ありがとうございました！
これでスマホではどう表示されてるか、ＰＣのブラウザ上で確認できるようになったね！やった！！
