RalaCode
menusearch

【Chrome】Webサイトのスマホ表示、PC表示を確認する

  • HTML, CSS
【Chrome】Webサイトのスマホ表示、PC表示を確認する

「Google Chromeで、今開いているWebサイトがスマホ表示だったらどんな感じになるのか確認したいな」

今回は上記の悩みにお答えします。

解決策としては、Google Chromeの「デベロッパーツール」というものを使います。
デベロッパーツールは、簡単に言えば「Webサイトを詳しく検証するためのツール」です。

デベロッパーツールは、本当にいろんな機能が使えて結構複雑です。

この記事では、以下にしぼって解説します。

  • Webサイトをスマホで表示した場合の見た目を確認する

  • Webサイトをタブレットで表示した場合の見た目を確認する

デベロッパーツールを起動する

Google Chromeを開いた状態で以下のショートカットキーを押してください。

  • Windowsなら「Ctrl + Shift + I(←アルファベットのアイ)」

  • Macなら「comand + option + I(←アルファベットのアイ)」

ipad_developer

↑このような表示になったと思います。

左にサイトが表示され、右になんか色々文字が書かれています。
右の色々文字が書かれている部分を「Dock(ドック)」といいます。

develper_down

このような表示になることもあります。
上の部分にサイトが表示され、下の部分にDockが表示されています。

developer_right

Dockの位置はお好みで決めていいです。
ここではDockの位置を右に設定しています。

表示方法を変えてみる

change_iphone

↑この画像のように「iPad」と表示されているところをクリックします。
デフォルトでは「iPad Pro」と表示されているかもしれません。

プルダウンが表示されるので、その中の「iPhone6/7/8」をクリックします。

chrome_developer

↑サイトがスマホ表示になります。
このサイトはiPhoneだと、上の画像のような見た目になります。

ipad_rotate

↑先ほどのプルダウンから「iPad」を選択して、iPadの表示にしてください。

上の画像のように「rotate」ボタンを押すことでiPadをにした時の表示とiPadをにした時の表示を確認できます。

ipad_px

↑上のところを見ると数字が書いてあります。
iPadの場合、以下のようになります。

  • 縦表示:縦 x 横 =(768px) x (1024px)

  • 横表示:縦 x 横 = (1024px) x (768px)

サイトを作る時は「スマホ表示」と「PC表示」を分けて作ります。
「スマホ表示」と「PC表示」を分けて考える時に、「768」や「1024」という数字をよく見ることになると思います。

Web制作を学習中なら

「Web制作を勉強したい」という方は、まずデベロッパーツールを使いこなせるようになる必要があります。
なぜなら、現代のWebサイトはスマホでもタブレットでもPCでもきれいに表示されないと誰も見てくれないからです。
それに、Google検索でも上位表示されにくいです。

Web制作では、とにかくHTMLとCSSの学習になるかと思います。
しかし、デベロッパーツールの使いこなしも同じくらい大事です。

デベロッパーツールを使いつつ、Web制作を進めていくという経験を積む

これが重要なんです。

上記を実現したいなら、エビスコムの書籍がおすすめですよ。
初心者向けなら、以下の2つです。

上記の書籍では、スマホ表示とPC表示を常に確認しながらWeb制作を進めていきます。
まさに、本格的かつ実践的なWeb制作を体験することができます。

というわけで、記事は以上です。

Copyright © 2023 RalaCode