「Google Chromeで、今開いているWebサイトがスマホ表示だったらどんな感じになるのか確認したいな」
今回は上記の悩みにお答えします。
解決策としては、Google Chromeの「デベロッパーツール」というものを使います。
デベロッパーツールは、簡単に言えば「Webサイトを詳しく検証するためのツール」です。
デベロッパーツールは、本当にいろんな機能が使えて結構複雑です。
この記事では、以下にしぼって解説します。
Webサイトをスマホで表示した場合の見た目を確認する
Webサイトをタブレットで表示した場合の見た目を確認する
デベロッパーツールを起動する
Google Chromeを開いた状態で以下のショートカットキーを押してください。
Windowsなら「Ctrl + Shift + I(←アルファベットのアイ)」
Macなら「comand + option + I(←アルファベットのアイ)」
![ipad_developer](https://images.ctfassets.net/o1bgnefm7hbe/4aLv3L4j1oUFVUD4ZCK0Ow/6deeb4c40850974d5afaab8c757ade7a/1_ipad_developer.png?w=760&h=421&q=50&fm=png)
↑このような表示になったと思います。
左にサイトが表示され、右になんか色々文字が書かれています。
右の色々文字が書かれている部分を「Dock(ドック)」といいます。
![develper_down](https://images.ctfassets.net/o1bgnefm7hbe/4B2p4Gkdoz1cuNHNdH8UD0/21c6d932aa2c6b30adf305f71832c656/1_1_develop_down.jpg?w=760&h=403&fl=progressive&q=50&fm=jpg)
このような表示になることもあります。
上の部分にサイトが表示され、下の部分にDockが表示されています。
![developer_right](https://images.ctfassets.net/o1bgnefm7hbe/FaUuTSrJev9H9Hm5o8Ia3/c04122786b9d0d82378b2fc9614583ef/1_2_develop_right.jpg?w=760&h=570&fl=progressive&q=50&fm=jpg)
Dockの位置はお好みで決めていいです。
ここではDockの位置を右に設定しています。
表示方法を変えてみる
![change_iphone](https://images.ctfassets.net/o1bgnefm7hbe/1Ev7g7CzMMi8PzxTkYVeHh/729f6a9114d26303e11ab5c492389eca/2_change_iphone.png?w=760&h=421&q=50&fm=png)
↑この画像のように「iPad」と表示されているところをクリックします。
デフォルトでは「iPad Pro」と表示されているかもしれません。
プルダウンが表示されるので、その中の「iPhone6/7/8」をクリックします。
![chrome_developer](https://images.ctfassets.net/o1bgnefm7hbe/24mSkikNcVm16qyvRtF4dN/5daf4508902f422dceddfb9601cfaaac/0_chrome_developer.jpg?w=760&h=420&fl=progressive&q=50&fm=jpg)
↑サイトがスマホ表示になります。
このサイトはiPhoneだと、上の画像のような見た目になります。
![ipad_rotate](https://images.ctfassets.net/o1bgnefm7hbe/6bKqvzWdj2AdXKImJhY9pn/9fc9e23d3c6cae64be9a109d81ef997d/3_ipad_rotate.jpg?w=760&h=422&fl=progressive&q=50&fm=jpg)
↑先ほどのプルダウンから「iPad」を選択して、iPadの表示にしてください。
上の画像のように「rotate」ボタンを押すことでiPadを縦にした時の表示とiPadを横にした時の表示を確認できます。
![ipad_px](https://images.ctfassets.net/o1bgnefm7hbe/LhzwU3AWUZpKMAckn8qtX/d0c8c3b226e8e05f662fc54499036fd8/4_ipad_px.jpg?w=760&h=570&fl=progressive&q=50&fm=jpg)
↑上のところを見ると数字が書いてあります。
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制作を体験することができます。
というわけで、記事は以上です。