スマホ・タブレットでの表示をPC用ブラウザで確認する(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
表示確認したいページ
表示確認したいページ
表示確認したいページ
表示確認したいページ
表示確認したいページ
表示確認したいページ
デベロッパーツールを起動
デベロッパーツールを起動
「F12 開発者ツール」を起動
「F12 開発者ツール」を起動
レスポンシブデザインビューを起動
レスポンシブデザインビューを起動
モバイル端末アイコンをクリック
モバイル端末アイコンをクリック
「エミュレーション」を選択
「エミュレーション」を選択
モバイル端末での見え方を確認できる
モバイル端末での見え方を確認できる
Windows Phone端末での見え方を確認できる
Windows Phone端末での見え方を確認できる
モバイル端末での見え方を確認できる
モバイル端末での見え方を確認できる
デバイス名を指定できる
デバイス名を指定できる
端末の向きを切り替えられる
端末の向きを切り替えられる
端末の縦横サイズを手入力することもできる
端末の縦横サイズを手入力することもできる
ユーザエージェント名も変更できる
ユーザエージェント名も変更できる
(左上)「Zoom to fit」がOFFの状態、(右下)「Zoom to fit」がONの状態
(左上)「Zoom to fit」がOFFの状態、(右下)「Zoom to fit」がONの状態
再読込を促すアラート
再読込を促すアラート
端末サイズを選択したり、手動で設定したりできる
端末サイズを選択したり、手動で設定したりできる
ユーザエージェント名を選択したり、手入力したりもできる
ユーザエージェント名を選択したり、手入力したりもできる
端末の画面サイズは、選択もできるが直接編集もできる
端末の画面サイズは、選択もできるが直接編集もできる
端末の向きを切り替えられる
端末の向きを切り替えられる
実機とまったく同じ表示になるわけではないが、レイアウトなどの大まかな確認には便利
実機とまったく同じ表示になるわけではないが、レイアウトなどの大まかな確認には便利
この写真の記事を読む
表示確認したいページ
表示確認したいページ
表示確認したいページ
デベロッパーツールを起動
「F12 開発者ツール」を起動
レスポンシブデザインビューを起動
モバイル端末アイコンをクリック
「エミュレーション」を選択
モバイル端末での見え方を確認できる
Windows Phone端末での見え方を確認できる
モバイル端末での見え方を確認できる
デバイス名を指定できる
端末の向きを切り替えられる
端末の縦横サイズを手入力することもできる
ユーザエージェント名も変更できる
(左上)「Zoom to fit」がOFFの状態、(右下)「Zoom to fit」がONの状態
再読込を促すアラート
端末サイズを選択したり、手動で設定したりできる
ユーザエージェント名を選択したり、手入力したりもできる
端末の画面サイズは、選択もできるが直接編集もできる
端末の向きを切り替えられる
実機とまったく同じ表示になるわけではないが、レイアウトなどの大まかな確認には便利
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます