RalaCode

44件の記事があります

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

【Google Chrome】Webサイトのスマホ表示、PC表示を確認する
サムライエンジニアプラス

Google Chromeの「デベロッパーツール」というものを使います。
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

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

ipad_rotate

先ほどのプルダウンから「iPad」を選択して、iPadの表示にしてください。
上の画像のように「rotate」ボタンを押すことでiPadをにした時の表示とiPadをにした時の表示を確認できます。

ipad_px

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

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

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

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

以下の記事では、デベロッパーツールを駆使して実際にレスポンシブサイトを作っていきます。

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る
【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る
記事を読む

記事は以上です。

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

Netlifyのアカウントを作成する

Netlifyのアカウントを作成する

【画像のダウンロード不要】Unsplash Sourceの使い方

【画像のダウンロード不要】Unsplash Sourceの使い方

【無料です】作ったWebサイトを簡単に公開する方法

【無料です】作ったWebサイトを簡単に公開する方法

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

【自動コンパイル】VSCodeでSassを使う方法を解説

【自動コンパイル】VSCodeでSassを使う方法を解説

プログラミングって結局何から始めればいいの?

プログラミングって結局何から始めればいいの?

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy