*

スマホサイトをプレビュー(表示確認)する際に便利なChromeのDeveloper Toolsのエミュレーター

Pocket

Depositphotos_28048133_xs

ウェブページを制作するときに、ページがブラウザでどのように表示されるかブラウザでチェックしながら作成していきます。スマートフォン用ウェブページの場合は、PCのブラウザの横幅を狭くして、表示チェックをしたりすることがありますが、もう少し精度を高くしたいなどの不満がありました。

しかし、今使っているChromeの「Developer Tools」にとても便利なプレビューができるエミュレーターが付いていたのです。

Chrome Developer Toolsを開く

Chrome Developer Toolsを開くには、まず右上のメニュー(三本線)→ツール→Developer Toolsをクリック。

developer-tools-emulation01

次にDeveloper Toolsの左上のスマートフォンアイコンをクリック。
「emulation」タブをクリックして、modelを選択。
developer-tools-emulation02

ページを更新すると以下のような画面になってそれぞれのデバイスごとの画面の大きさになります。

developer-tools-emulation03

このChromeのDeveloper Toolsのエミュレーターを使えば、ほかのサイトに行ったり、別のツールを使う必要もないので、大変便利です。

この記事を書いた人

arkth
食品系ECサイトの運用をしているWEBマスター。CMSのテンプレート開発からSEO、サイト分析、集客など、一通りのことを、まるっとやっています。

sponsored link

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

記事はありませんでした

sponsored link

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

SPONSORED LINK

【保存版】コンテンツマーケティングを行う前にチェックしたい記事16選

サイトへの集客を強化したいのだけど、広告費の予算にも限りがあるから

「いちばんやさしい新しいSEOの教本」を読めばSEOの基礎が実践できるバイブル的な一冊

SEO(検索エンジン対策)の目的とは、そもそもなんでしょうか。

Web担当者がオススメするサイト運用に役立つツール28選

自社のウェブサイト管理を任されている方には、おすすめのツールをご紹

スマホサイトをプレビュー(表示確認)する際に便利なChromeのDeveloper Toolsのエミュレーター

ウェブページを制作するときに、ページがブラウザでどのように表示

viewportの設定はこれで大丈夫!iOSでもAndroidでもPCでも見やすくできるソースコード

スマホ用サイトを製作するにあたって検討しなければならない事項に画面

→もっと見る

  • follow us in feedly
PAGE TOP ↑