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

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

関連記事

コーディング初心者におすすめの記事まとめ

こんにちは、ぶちこです。 最近の私はと言うと、仕事で先輩に教わりながらコーディングを行なっています。 ですが、ちょっとしたコードすら自分1人では正確に書けず悪戦苦闘中。。スラスラとコードが書ける先輩方 …

【Webデザインおすすめ書籍】Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

今日は久しぶりに、Webデザイン関連のおすすめの本をご紹介したいと思います。 デザインのアイディアやヒントが欲しい方、クライアントと方向性を決める時に参考となるものが欲しいという方、必見の本ですよ! …

ロゴの背景を簡単に透明にできる「画像透過ツール」

今回は、PhotoshopやIllustratorなどのソフトを使わずに、ブラウザで簡単にロゴの背景を透過することができる「画像透過ツール」をご紹介します。   「画像透過ツール」の使い方 …

【Illustrator】使用していないスウォッチだけを削除する方法

デザインをするときは使用することも多いIllustratorのスウォッチ機能ですが、多用しすぎるとファイル容量が増えてデータを重くする原因になってしまいます。 スウォッチはどんどん自動保存されていくの …

Webデザインを始めて変わったこと

こんにちは、ぶちこです。 毎日狂ったように暑いですが、皆さん大丈夫でしょうか…。     最近、ふと思うことがあります。     それは、webデザインを始めてから、自分変わったなあということ。   …