- 東禎章
GoogleChromeでレスポンシブを確認できます
こんにちは デジタルライフ・コンシェルジュの東です。
今日はWEBサイトを作る機会がある方へ便利な機能をご紹介します。
PC・スマホ・タブレットはそれぞれ画面の幅が違うので、PCの画面できちんと表示されるように作っていても、スマホ・タブレットはPCに比べて幅が狭いため、サイトの右側が画面から切れて横方向にスクロールするか、全体を縮小しないと画面内に全体が収まらないことになります。（とくにスマホは）
そこで最近のWEBサイト作成アプリやツールでサイトを作ると、『レスポンシブ』と言って自動的にどのデバイスで見ても表示が最適化されるように作ってくれます。
PCでは横に広がって見えるサイトも、スマホ画面で見るとメニューが三本線（ハンバーガーボタン）に表示されてサイト全体が左右の余白無く縦長に表示されます。
問題はPCだけで、WEBサイトを作っているとスマホやタブレットで見た時の画面表示が確認できないことです。表示確認するためにスマホやタブレットなどのデバイス（実機）を手元に置いて画面チェックしながらの作業は大変です。デバイスも複数用意する必要があります。
そんな時はGoogle Chromeのデベロッパーツールと言う機能を使うと簡単に確認できて便利です。
Google Chromeでレスポンシブを確認したいWEBサイトを開きます。
サイトの中で右クリックして【検証】をクリックします。
【Toggle device toolbar】と表示されるアイコンをクリックします。
【Responsive】をクリックして確認したいデバイスをクリックします。
指定したデバイスの画面でWEBサイトを見ることが出来ます。 ※ここではiPhone Xで表示される画面を確認しています。
WEBサイトを作る機会がある人はぜひお試しください。
デジタルライフ・コンシェルジュ 東 禎章
パソコン楽習館（埼玉）
