Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
Google Chromeでスマホ表示の確認をする方法 | ぶちろぐ

アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

Google Chromeでスマホ表示の確認をする方法

投稿日:

スマホでの表示を確認したい時、わざわざスマホを出して検索して…とやっていると結構面倒ですよね。

そんな時は、Google Chromeを使うとパソコンで簡単にスマホの表示を確認することができるんです。

では、その使い方について早速ご紹介していきたいと思います!

 

Google Chromeでスマホの表示を確認する方法

1.ページ内で右クリック → 検証

 

2.デバイスツールバーのアイコンをクリック(ショートカット:command + Shift + M)

 

 

するとスマホ画面の表示に切り替わりました!

 

4.「Responsive▼」をクリックして、確認したいスマホ端末を選択をします

 

検証を終えたい時は、右上の×マークをクリックすれば終了することができますよ。

以上、簡単にですがGoogle Chromeでスマホ表示を確認する方法をご紹介しました。

よく知られているツールだとは思いますが、まだ使ったことがないよという方はぜひこの機会に使ってみてくださいね。

 

 

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Illustrator】文字を縦書きにする方法

今回は、イラストレーターで文字を縦書きにする方法をご紹介します。 方法としては2つあるので、どちらか使いやすい方、または状況に応じて使い分けてみてくださいね。   イラストレーターで文字を縦 …

Webデザイン学習法その1. 独学で勉強する

Webデザインを学習するのに、まずは独学でやってみようと思う人はたくさんいると思います。 そこで今回は、Webデザインを独学で学ぶことのメリットとデメリットについて私なりにまとめてみました。 &nbs …

【Illustrator】配置した背景透明のPSD画像に黒いラインが出てしまう時の対処法

IllustratorはPhotoshopで作成したPSDファイルの配置が可能ですが、背景が透明のPSD画像を配置した時に、絵柄と透明部分の間にわずかな黒いライン(境界線らしきもの)が出てきてしまうこ …

終わらない修正のループにはまらないために…参考にしたい記事3選

細部の調整も終わり、デザインがほぼ完成していた状態で、クライアントからの膨大な修正依頼。それもデザインの作り直しになってしまうような大きな修正だったり…。 こういった経験、デザイナーのみな …

デザイナー必見!使える写真素材サイト

前回に引き続き、素材サイトをご紹介したいと思います。今回は写真編です! いつも素材探しに苦労している私が見つけた、オススメのフリー素材サイトをいくつかピックアップしていきますね〜!   写真 …