GoogleChromeでPC上から各種モバイルデバイス(スマホ、タブレット等)表示を確認する方法

自分のホームページ等を持っている方。

PC上だけで表示を確認していないだろうか?

もしくは、自分のスマホだけで見え方を確認していないだろうか?

 

ホームページを制作する際に

必ず確認しておきたい「モバイルデバイス表示」。

今や誰もがスマホやタブレット等からwebサイトを確認する時代。

 

どのデバイスから見ても、デザインが崩れないようにすることを

「レスポンシブデザイン」という。

自分のホームページなどが、どんな風に表示されているのか確認できる方法がある。

(ただし、Google Chrome での方法)

 

 

 

 

 

↑これは、PC上から見たダマリのホームページ。

このページをPC上で、スマホやタブレット上の表示を確認できる。

 

 

 

 

 

PC画面左上のメニューバー「表示」より「開発/管理」を選び、

さらに「デベロッパーツール(開発者ツール)」を選択。

 

 

 

 

 

↑すると、右側に様々なデベロッパーツールが表示される。

分かる人が見れば、どのような言語でどういう風にサイト制作されてるかが分かる。

 

 

 

 

 

↑このデベロッパーツールの左上に、スマホのようなイラストがある。

これをクリック!すると。。

 

 

 

 

↑スマホで見たサイト表示に変わる。

 

 

 

 

 

 

さらに、スマホ表示された上部一番左側メニュー「Responsive」より

各種モバイルデバイスを選べ、どんな表示がされているか確認できる。

 

 

一度確認してみてはいかが?


コメント
コメントする








   

ホームページ

プロフィール

グラフィックデザイナー・ダマリ
広告制作実績6000件。鹿児島県出身。趣味・乗馬、弓道弐段、フルマラソン3回完走、調理師免許取得、海外渡航22ヵ国。広告制作会社、新聞社等デザイン歴20年。2018年8月でデザイン屋Damalish.com3年目。現在、大分県に夫、長男、黒猫と在住。
プロフィールの詳細

お問い合わせ

デザイン制作に関わることは何でもご相談ください。

デザインの見積もり・制作ご依頼
のご相談はコチラ

ネットツール

最近の記事

カテゴリー

以前の記事

produced by "POWER for Restart"

sakuragiyoshiko.com × damalish.com 編集者・櫻木よしこさんとのセルフマガジン共同プロデュースを始めました!

セルフマガジン vol.02



◆デザイン屋Damalish.comマガジン「POWER」(無料配布)を希望される方は、以下の内容を記入しお申込みください。
お申込み⇒info@damalish.com

〇疚 ▲瓠璽襯▲疋譽 住所 ど数
住所は「メッセージ欄」に郵便番号を忘れず、またマンションの場合はマンション名まで記入してください。
※発送までにしばらくお時間いただきますこと、ご了承ください。

コメント

search this site.

管理者ページ