Chromeだけで出来る、ページをスマホサイズに表示する方法


ChromeDevTool_Responsive_Cap 2016-06-29 8.54.01

引き続き、Chromeデベロッパーツールの話題。

ブログでもレスポンシブデザインのテーマを使っていて、レイアウトを変更した場合など、PC画面以外にもiPhoneやiPad、その他スマートフォンなどでの表示が正しくされているかチェックしたくなることがよくあります。

というか、チェックしておかないといけないですよね。 スマホで見たらデザインだだ崩れとか、格好悪すぎます。

 

このスマホサイズでのページ表示、これもChromeデベロッパーツールでできちゃうんですよね。 すごいです。 その方法についてまとめておきます。

スポンサードリンク

関連記事

まずはChromeデベロッパーツールを起動

1.Cap 2016-06-29 8.54.16

まずはChromeデベロッパーツールを起動しましょう。 その方法については下記をどうぞ。

ページをスマホサイズ表示

デベロッパーツールの画面の左上端を見てみましょう。 こんな形のボタンがあると思います。 ここをクリックすると…。

2.Cap_2016-06-29_8_54_24

ページ側の表示が変化。 iPhone 6 Plusで表示した場合のTipstourのトップページが表示されるようになりました。

3.Cap_2016-06-29_8_54_33

この表示のまま、実際にリンクをクリックしたりスクロールしたりすることも可能なので、この機能を使えばスマートフォンでわざわざ開くことなく、デザインチェックが可能だというわけです。

スポンサードリンク

 

デバイスは変更可能

もちろんiPhone 6 Plus以外のサイズにも変更可能です。

デバイス名をクリックすると、プルダウン式に複数デバイスの名前が表示されるので、それぞれクリックすればその解像度での表示に変わるわけですね。

4.Cap_2016-06-29_8_54_46

「Edit」を選択すると、もっと沢山のデバイスから選ぶことも可能です。 もちろんカスタムサイズのデバイスを追加することも。

5.Cap 2016-06-29 8.55.02

これでウキウキ・Chromeデベロッパーツールライフですね。 何がウキウキなのかはわからないけど。 それでは〜。

 

スポンサードリンク

 

この記事が参考になったら、TipstourのFacebookページに『いいね!』をお願いします!

 

よろしければFeedlyもご登録ください!
follow us in feedly