「DevTools」で「デバイスのツールバーを切り替え」とは

デバイスのツールバーを切り替え」とは、Chrome に付属している「DevTools(開発者ツール)」の一機能で、PC で開いた Webページをスマホやタブレットなどで開いた場合の画面表示が確認できます。

「DevTools」については解説済みですが、ブラウザーを開いた状態でファンクションキー「F12」を押すと画面右側に表示されるツールです。

この「DevTools」の上部左端から2つ目が「デバイスのツールバーを切り替え」アイコンです。

wd211013-03.png

 

このアイコンをクリックすると画面左側に現在開いている Webページの画面サイズを変更して表示することが可能となります。

wd211013-04.png

 

画面左の上部に現れるバーに「サイズ」という項目があります。

wd211013-05.png

 

クリックすると「iPhoneX」「iPad」など代表的な端末名が並んでいます。

wd211013-06.png

 

このリストから選択した端末での表示が疑似的に再現されます。

wd211013-10.png

「疑似的」なので実際の表示とは違う部分もありますが、かなり近い画面になります。ただし一度、再読み込み(F5)する必要があります。

 

この機能を使うと、たとえばサイトの開発者はスマホやタブレットでどう表示されるか確認できるわけです。

wd211013-09.png

開発者でなくてもスマホやタブレットでどう表示されるかパソコン上で確認したいときに利用できます。

 

同じ機能が Edge の「DevTools」にもあり、同じく上部左端から2つ目のアイコンで名前は「デバイス エミューレーションの切り替え」です。

wd211013-07.png

 

違うのは名前だけで、機能も使い方も同じです。

wd211013-08.png

ブラウザーがあれば誰でも使える機能なので紹介しました。

スポンサーリンク

ご意見&コメント

パソコン用語解説」をご利用いただき、ありがとうございます。

「参考になった」「ちょっと違うかも?」というときは TwitterFacebookページを使ってご感想やコメントをいただけると嬉しいです!励みにもなりますし、必要に応じて情報の追加や修正もしてまいります。

 

こちらの記事もいかがですか?(一部広告含む)

関連した記事を検索

パソコントラブルQ&A」「パソコン用語解説」では関連Q&Aや用語解説を豊富に掲載中です。検索してみてください!

五十音順」インデックス

別サイトで「パソコン用語集」も公開しています。

過去の用語解説 (608 件)

編集長のプロフィール

編集長

:パソコン生活応援アドバイザー。「なにしろパソコン.com」サイト運営、メルマガ編集、セミナー講師からコラム・書籍執筆まで実績豊富!

「パソコン用語解説」では厳密さよりも、分かりやすさ、覚えやすさを優先しています。そのため強引なたとえを使ったり、編集長独自の見解も交えておりますのでご了承ください。解説の中でパソコンの設定や操作法を紹介していますが、お使いのバージョンなど環境によって違う場合があります。

また、本サイトを参考にしたパソコン設定、サイト閲覧、紹介したソフトウエアや機器の購入&使用、そしてトラブル対応やインターネット活用は『利用者の責任』でお願いします(免責事項)。