【簡単】Chromeデベロッパーツールでスマホ機種を追加する方法

こんにちは、ゆうが（@yuuuugablog）です。
今回は、Chromeのデベロッパーツールでスマホ機種を追加する方法を紹介してきいきます。

完成イメージ

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/dev1.jpg” alt=”【簡単】Chromeのデベロッパーツールでスマホ機種を追加する方法”]デフォルトであるスマホ以外の、スマホ機種を追加することが出来ます。たとえば、iPhone12など。
[/imgfuki]

他の機種を追加することで、実機がなくてもCSSのスタイルなど細かい確認ができるようになりデザインの崩れなどを事前に防げるようになります。

[box class=”box30″ title=”本記事のもくじ”]

1. Chromeデベロッパーツールを開き、スマホ表示にする
2. 「Edit」を押してスマホの追加設定をする
3. サイズと機種名を入力して、追加する

[/box]

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

1.デベロッパーツールを開いてスマホ表示にする

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/dev-1.jpg” alt=”1.デベロッパーツールを開いてスマホ表示にする”]
はじめに「右クリック→検証」でChromeデベロッパーツールを開いてください。
[/imgfuki]

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/5904f4fd6ced34ae9e4eb743109f277f.jpg” alt=”1.デベロッパーツールを開いてスマホ表示にする”]
そしたら次にスマホのアイコンをクリックして、スマホ表示にしてください。
[/imgfuki]

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/e7df84a1bb021d56913b3f1d4c10922e.jpg” alt=”1.デベロッパーツールを開いてスマホ表示にする”]
そしたら機種選択の画面にいきます。

エンジニアの方ならわかると思いますが、スマホ表示で確認したいときみたくやればOKです。
[/imgfuki]

2.「Edit」を押してスマホの追加設定をする

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/4086aac5bc2c3512c1d150006f3b0954.jpg” alt=”2.「Edit」を押してスマホの追加設定をする”]つぎに、画像のように「Edit」をクリックして機種追加画面にいきます。
[/imgfuki]

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/dev-2-1.jpg” alt=”2.「Edit」を押してスマホの追加設定をする”]
そしたら画面がでてくるので、Add custom deviceをクリックしてください。
[/imgfuki]

3.サイズと機種名を入力して、追加する

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/dev-3-1.jpg” alt=”3.サイズと機種名を入力して、追加する”]
最後にDevice Nameに追加したい機種名を入力して機種のサイズを入力すれば完了です。
[/imgfuki]

iPhone12のサイズ表

またサイズ例として、iPhone12のサイズ表を記載しておきます。
※それぞれ横×縦です。

iPhone12,12Pro

iPhone12mini

iPhone12ProMax

あとは先程の手順通りにやれば、自分が追加したい機種を無限に追加できます。
参考：【iPhone 13 ProMaxまで対応】レスポンシブデザインのブレイクポイントのテンプレ

[kanren id=”1642″]