今日も元気な株式会社ナナサンの半人前非公認ウェブマスターねこです。いまやパソコンよりモバイル端末で見られることが多くなっているWEBサイト。ユーザーの画面のサイズも多種多様です。各ブラウザには検証用に様々なデバイスの画面サイズで確認ができる機能が備わっていますが、1つ1つ画面サイズを選択して確認するので少々時間がかかります。スピーディに確認できるようにしたい!できたら一覧になっていたらうれしい!そんな時に使ってみたいChromeの拡張機能をご紹介します。ResponsiveViewer追加はこちらのURLからhttps://chrome.google.com/webstore/detail/responsiveviewer/inmopeiepgfljkpkidclfgbgbmfcennb「Chromeに追加」から追加をして、確認をしたいサイトを開きます。するとブラウザ右上にアイコン(黒いマル)が出ますのでクリック!クリックすると...さっそく様々なデバイスの画面幅が並んでいます。左側のメニューを簡単に説明します。デバイズの名前をクリックすると確認ができる位置まで移動してくれます。各デバイスの並びを縦方向にするか横方向にするか選択できます。表示倍率ここにない画面サイズを指定したい!そんな時は、右上「+」マークから追加ができます。Proを追加してみます。出てきました!追加をするとサイドメニューに追加がされます。モバイル端末だけでなくパソコンの画面チェックも行えます。まとめ最終的には実機での確認が必要になると思いますが、ざっと総覧できるとイメージがつきやすいですね。テキスト部分だとキャッチコピーのような文章の改行位置、画像だとデバイス幅に最適な大きさやデザインになっているかなどさっと確認できそうです!制作の現場だけでなくWEB担当の方にも便利な拡張機能だと思います。日々の更新やコンテンツ制作などお困りのWEB担当者様に。サービスを行っています。WebsiteDriver(ウェブサイトドライバー)お問い合わせをお待ちしております。Entry2020.02.17「JPG-??」とか「PNG-??」の??ってなんだろう2020.02.10カレーパーティーが開催されました。