Chromeデベロッパーツール
自分のサイトを自分のスマホ以外の機種で見ると、一体どう見えているのだろう?。という時に便利な、Chromeの「デベロッパーツール」を紹介。


【スポンサードリンク】
【使い方】
まずは、Chromeで普通にサイトを表示する。

Chromeデベロッパーツール2
「その他ツール」の中にある「デベロッパーツール」を選択。

Chromeデベロッパーツール3
デベロッパーツールの画面

Chromeデベロッパーツール3_2
ソースが表示される部分の上にあるスマホマークをクリックする。 

Chromeデベロッパーツール3_3
更にここで機種を選択することができる。iPhoneシリーズ、iPad、Nexus、Galaxy等。
もし、ここで機種を選択してもPC表示のまま切り替わらない場合は、再読み込みをすると認識する場合がる。

スマホサイトやレスポンシブルデザインを制作する時に役立つのはもちろん、スマホの機種変更をする時に、画面サイズが変わるとブラウジングの見え方はどう変わるのかの確認にもなって便利だぞ。

(ライター:やまびこ)

この記事をシェアする
このエントリーをはてなブックマークに追加



Twitterでフォローして購読する
Feedlyで購読する

▼ 本日の人気記事を続けて読む