Chrome:デベロッパーツールでスマホ機種を追加する

Chromeデベロッパーツールにスマホ機種を追加する Design

デベロッパーツールは、スマートフォンなどモバイル端末を含め、CSSなど細かい部分を検証することができるので、ウェブサイトのデザイン調整に活用していらっしゃるかたが多い機能ですね。

今回はデベロッパーツールにスマホ端末を追加する手順を説明します。

デフォルトで設定されている端末一覧から選択することもできますし、デフォルト以外のデバイスもカンタンに追加できますよ!

是非参考になさってくださいね♪

各種端末でサイトがどのように表示されるかをチェックするだけなら、Chrome拡張機能「Responsive Viewer」も便利だと思います。

パソコンでスマホ画面表示を一括チェック!レスポンシブ デザイン チェック ツール
スマホなどのモバイル端末でレスポンシブ デザインがどのように表示されるか? 実機はもう不要です! デバイスやサイズを指定してひとつひとつ確認するのも面倒なので、複数のユーザーエージェントの見え方を一括チェックできるGoogle Chrome拡張機能をご紹介しますね。しかも、操作はいたってカンタン。 【...続きを読む】
スポンサーリンク

Chromeデベロッパーツールを開いて端末を追加する

Chromeデベロッパーツールを開く

Chromeブラウザで検証したいウェブページを開き、右上の ]をクリックしてオプションメニューを展開し、[その他のツール]から[デベロッパーツール]を選択します。

Chromeデベロッパーツールを開く

Toggle device toolbarを開いてデバイス編集を表示する

デベロッパーツール表示領域の[Elements]の左にあるアイコン(Toggle device toolbar)をクリックして、表示領域にトグル デバイス ツールバーを表示させます。

Toggle device toolbarを表示すると、下図の通り、表示するユーザー エージェントが選択できるようになります。

[Responsive ▼]をクリックして展開し、[Edit]を選択しましょう。

Toggle device toolbarを開いて、Editを選択する

デバイス一覧から表示する/表示しないデバイスを編集する

デベロッパーツール領域にデバイスの一覧が表示されます。

トグル デバイス ツールバーの[Responsive ▼]を展開した際に表示される一覧に表示したいデバイスにチェックを入れます。

表示しなくてもよいデバイスは、チェックを外しましょう。

その後、デベロッパーツール領域の[  ]をクリックしましょう。

これで、トグル デバイス ツールバーの[Responsive ▼]を展開した際に表示される一覧の編集が完了です!

デフォルトの一覧からデバイスを選択する

デバイス一覧にないデバイスを追加する

デベロッパーツール表示領域の[Elements]の左にあるアイコン(Toggle device toolbar)をクリックして、表示領域にトグル デバイス ツールバーを表示し、[Responsive ▼]をクリックして展開し、[Edit]を選択します。

次に、青で表示される[Add custom devise…]をクリックしましょう。

デフォルトデバイス一覧に無いデバイスを追加する

Device欄のデバイス名(Device name)は入力必須項目です。

その下の欄に、デバイスの縦横ピクセルを入力しましょう。

User agent stringとUser agent client hintsを入力すればより詳細なデバイス設定が可能ですが、入力必須項目ではないので未入力のままでOKです。

下図のサンプルでは、デバイス名を test deviceとし、縦横ピクセル数をそれぞれ400、700と入力して[Add]をクリックしました。

デバイス名と縦横ピクセルを入力する

デベロッパーツール領域の「Emulated Devices」欄に、上述の手順で追加した test deviceが追加され(チェック付き)、トグル デバイス ツールバーの[Responsive ▼]を展開した際に表示される一覧にも test deviceが追加されます。

追加したデバイスが追加されます

追加したエミュレート カスタム デバイスを編集・削除する

上述の手順で追加したデバイスは、その内容を編集したり削除したりすることができます。

追加したカスタムデバイスにポインタを合わせると、鉛筆とゴミ箱アイコンが表示されます。

鉛筆アイコンをクリックすれば、そのカスタムデバイスの設定詳細を編集できます。

ゴミ箱アイコンをクリックすると、そのカスタムデバイスを削除できます。

追加したエミュレートデバイスを編集・削除する

以上 Chromeデベロッパーツールにスマホ端末を追加する手順の説明でした。

ご参考になれば幸いです♪