注目の記事 PICK UP

ChromeでPCからモバイル端末をエミュレートして表示する方法

Last Updated 2021.01.25

ChromeでPCからモバイル端末をエミュレートして表示する方法

19-chromedev-header
WEBサイトのデザインで問題となるのが、レスポンシブデザインで制作したときのモバイル端末での表示テストだと思います。当サイトもWordPressテーマがレスポンシブデザインなため、モバイル端末やタブレット端末での表示テストは必須です。その時便利なのがChromeの標準機能である「デベロッパーツール」です。本記事ではデベロッパーツールでモバイル端末表示をエミュレートする方法を解説します。

デベロッパーツールの使い方

19-chromedev-01
PCでChromeを開いたら、モバイル端末で表示テストしたいWEBサイトもしくはローカル環境のWEBサイトページを開きます。
Chromeの右上の「Google Chromeの設定」→「その他のツール」→「デベロッパーツール」と辿りクリックします。するとChromeの右側にOverview画面が表示されます。

モバイル端末のエミュレート表示方法

19-chromedev-02
上図の右上の赤枠で囲ったモバイル端末エミュレートのアイコンをクリックします。すると、今表示しているWEBサイトがモバイル端末で表示したときの見た目をエミュレート表示してくれます。
上図左上のエミュレートする端末一覧のプルダウンをクリックすると、エミュレート表示したいモバイル端末を選択することができます。モバイル端末の選択項目を「Responsive」にすることで、レスポンシブデザインにした時のブレイクポイントの確認もできます。

当サイトですとPC用レイアウトとモバイル用レイアウトのブレイクポイントは770pxです。このPC用レイアウトとモバイル用レイアウトはCSSだけで設定することも可能ですが、動的にブレイクポイントを設定するにはjavascriptを併用して使用することが多いようです。当サイトのテーマもjavascriptでウィンドウサイズを取得して770px以上か未満かで処理を分けていました。

勉強したい方は、Chromeから右クリック→「ページのソースを表示」をクリックして、WEBページのHTMLソースから「.css」「.js」ファイルへのリンクをクリックしてChromeで開くとCSSの内容やjsの内容を見ることができます。WEB制作の参考にページのソースを表示を活用してください。

WordPressのテーマやWEB制作で主にデザインを仕事とする時に必要となってくるのが、リセットCSSというものです。このリセットCSSとは何かということを解説してWordPressのテーマのカスタマイズやWEB制作の現場で役立つTipsとして解説します。

関連記事

  1. 14-wordpress-aicache

    WordPressサイトを簡単にバックアップ&復元-UpdraftPlus&Googleドライブ

  2. 20-marketing-header

    マーケティングの定義-消費者志向から価値主導のマーケティングへ

  3. 34-bigdata-header

    GDPR対応について-WordPressをGDPR&CCPAに対応する

  4. 22-recaptcha-header

    スパムコメントをシャットアウトreCAPTCHAサービスとInvisible reCaptchaプラ…

  5. 30-wpsitemap-header

    WP Sitemap Pageでユーザーフレンドリーなサイトマップを生成する

  6. 18-resetcss-header

    リセットCSSとは何か-WEB制作の基礎

  7. 13-wordpressfirst-aicache

    AMP for WPの詳細設定方法-Design(デザイン)

  8. 11-wordpressfirst-aicache

    モバイルユーザビリティを向上させるAMPとは何か?

  9. 17-postandpage-header

    WordPressの投稿ページと固定ページの違い

特集記事

  1. 04-wordpressfirst-aicache WordPressをインストールして最初にやる設定-ディスカッション設定
  2. 20-marketing-header マーケティングの定義-消費者志向から価値主導のマーケティングへ
  3. 13-wordpressfirst-aicache AMP for WPの詳細設定方法-Design(デザイン)
  4. 02-wordpressfirst-header WordPressをインストールして最初にやる設定-投稿設定
  5. 21-marketing-header マーケティング調査・戦略・プログラム立案・実行・管理の流れ
  6. WordPressをインストールして最初にやる設定-一般設定
  7. 03-wordpressfirst-aicache WordPressをインストールして最初にやる設定-表示設定
  8. 28-consumerbehavior-header 消費者行動モデル-AIDMA・AISAS・VISAS複雑化するコミュニケーション…
  9. 17-postandpage-header WordPressの投稿ページと固定ページの違い
  10. 11-wordpressfirst-aicache モバイルユーザビリティを向上させるAMPとは何か?

PICK UP記事

  1. 24-polylang-header PolylangとLingotek Translationで自動翻訳した多言語サ…
  2. 34-bigdata-header GDPR対応について-WordPressをGDPR&CCPAに対応する
  3. 19-chromedev-header ChromeでPCからモバイル端末をエミュレートして表示する方法
  4. 08-wordpress-head WordPressの簡単セットアップ方法-コアサーバー(CORESERVER)
  5. 11-wordpressfirst-aicache モバイルユーザビリティを向上させるAMPとは何か?
  6. WordPressをインストールして最初にやる設定-一般設定
  7. 09-wordpressfirst-aicache Site Kit by GoogleでGoogleサービスと連携する
  8. 21-marketing-header マーケティング調査・戦略・プログラム立案・実行・管理の流れ
  9. 25-marketing-header 4C分析とクロスSWOT分析-マーケティングの分析フレームワーク
  10. 12-wordpressfirst-header AMP for WPのイントールと詳細設定の方法

Twitter

最近の記事

  1. 30-wpsitemap-header
  2. 28-consumerbehavior-header
  3. 34-bigdata-header
  4. 26-gdpr-header
  5. 25-marketing-header
  6. 24-polylang-header
  7. 23-revealids-header
  8. 22-recaptcha-header
  9. 21-marketing-header
  10. 20-marketing-header

おすすめ記事

  1. 07-wordpressfirst-aicache
  2. 09-wordpressfirst-aicache
  3. 04-wordpressfirst-aicache
  4. 18-resetcss-header
  5. 17-postandpage-header
  6. 02-wordpressfirst-header
  7. 20-marketing-header
  8. 16-onamae-header
  9. 13-wordpressfirst-aicache
PAGE TOP