ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

機種別ハイスコア(80点~)タイトルを見る

管理人が投稿するマイクラ動画シリーズ

【Minecraft】ニュータウン建設物語【ゆっくり実況】

YouTubeで観る

よかったらぜひ観ていってね!(゚∀゚)

機種別ハイスコア(80点~)タイトルを見る

HP・ブログ関連

サイトをスマホで見た時のレイアウトを、Google Chrome(PC)上で確認する方法

2019年4月11日

インターネット検索をスマートホンで行う機会が多くなった最近では、自身のサイトをスマホ表示に対応(レスポンシブ化)させることは、もはや当たり前になってきました。

しかし自分のサイトをスマートホン表示に対応させている時、いちいちスマホを起動してレイアウトを確認していたら時間がかかるしとても面倒ですよね。そこで今回は、ホームページをスマホで見た時のレイアウトをGoogle Chrome(PC)上で確認する簡単な方法についてご紹介します!

※スマホの機種ごとにレイアウトの違いを確認することも可能です。

職業ユーチューバーにオススメ!

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・カード

当サイトからの入会で
初年度の年会費0円(無料)

20歳から入手可能な一流ゴールドカード

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・ゴールド・カード

当サイトからの入会で
初年度年会費0円(無料) 3万ポイント

Google Chromeでスマホレイアウトの確認

まず始めに、スマホレイアウトを確認したいページを、Chromeで開いておきます。

▼例として私のサイトで試してみます。


次にChromeの右上にある『設定』のマークから、『その他のツール』→『デベロッパーツール』を選択してください。


画面上の右もしくは下に、このようなバーが出現するので、ここの『スマホアイコン』をクリックしてください。


すると開いていたページが、以下の様にスマホレイアウトで表示されるようになります。ここで横のバーを左右に動かすことで横幅の大きさを変更して見ることもできます。


さらに、上のバーでは横幅をピクセル(px)で指定できたり、任意のデバイスを指定して、そのデバイスでのレイアウトを確認することもできます。

必ずしもスマホ上の表示と一致するワケではないので要注意

スマホでの表示を確認できるこの機能ですが、必ずしもスマホ上の表示と完全一致するワケではなく、稀に画像やiframe要素がレスポンシブになっていない状態で表示されることがあります。

その場合は、やはりスマホ上で確認するしかありません。あくまで簡易的な確認方法として、この機能を用いることをおすすめします!(゚∀゚)

ゲームも仕事も快適に!

2020年10月時点:最も人気なゲーミングPCはこちら

管理人が投稿するマイクラ動画シリーズ

【Minecraft】ニュータウン建設物語【ゆっくり実況】

YouTubeで観る

よかったらぜひ観ていってね!(゚∀゚)

関連コンテンツ

-HP・ブログ関連
-, , , , , , , , , ,

Copyright© ゲマステ!- Gamers Station , 2020 All Rights Reserved.