*

スマホサイトをプレビュー(表示確認)する際に便利な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のエミュレーターを使えば、ほかのサイトに行ったり、別のツールを使う必要もないので、大変便利です。

sponsored link

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

関連記事

記事はありませんでした

sponsored link

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

SPONSORED LINK

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

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

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

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

Toolbox with tools. Skrewdriver, hammer, handsaw and wrench
Web担当者がオススメするサイト運用に役立つツール28選

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

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

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

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

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

→もっと見る

  • follow us in feedly
PAGE TOP ↑