記事の詳細
Chromeでレスポンシブデザインがスマホで正しく表示されるか確認する簡単な方法
自身のサイトがスマホやタブレットでどのように見えるのかパソコンで確認する簡単な方法をご紹介します。
Google製のブラウザ、Chromeを使えば無料で簡単に確認することができます。最新のiPhone6 Plusも既に対応済みです!
今回のブログの見出しはコチラです!
まずはパソコンにChromeをインストールしましょう
ChromeのインストールはGoogleのサイトでまとめられていますので、こちらをご覧ください。
Chromeのインストールは終わりましたか?Chromeを実行して確認したいホームページを開きましょう!
今回はGoogleのウェブマスター向けモバイルガイドのページを開いてみます。
そして、開いたら「F12キー」をポチっと押してください。そうすると、画面の下の方に何やら文字がたくさん書かれた画面が開きます。これはホームページの構造を表しているものなので、今回は特に気にしなくて大丈夫です。
iPhone6、iPhone6 Plusもデバイスリストにありました!
スマホのアイコンをクリックすると下の図のような画面になりますので、左上の「Device」をクリックしてみてください。
聞いたり、見たことあるスマホやタブレットの名前がずらっと表示されるので、確認してみたいスマホの名前を選択してください。
選択すると自動的にサイズが変化しますので、選択したスマホで見た時の画面を擬似的に再現してくれます。
やっぱりXperia Z1を選んでしまいました。。。
私の愛用しているXperia Z1もデバイスリストにあったので、迷わず選択!!
Xperia Z1の場合、こんな感じで見えるそうです。
Chromeは無料でダウンロードできますので、利用しない理由はありません。この機能の他にもChromeはホームページ制作において役立つ機能がたくさんありますので、また別の機会にご紹介させて頂きますね。
無料で使えるツールをどんどん使って、効率的なWEB制作に役立てましょう!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。