どうも、チャーさんです。
あなたは、レスポンシブデザインの確認方法を、
探していませんか？
この記事では、レスポンシブデザインを、
スマホサイズ、タブレットサイズ、pcサイズと、
簡単に一発で確認できる方法を書いています。
なので、あなたがこの記事を読めば、
ものの１分ほどで、レスポンシブデザインを各サイズごとに、
確認することができるようになるでしょう。
ということで、レスポンシブデザインを、
確認したければ、このまま下にスクロールし、
読んでみてください。
スポンサードサーチ
レスポンシブデザインを確認するにはコレ
はい、でまず結論からいきまして、
レスポンシブデザインを確認する方法は、
グーグルクロームのデベロッパーツールを、
使うことです。
なぜならデベロッパーツールを使えば、
スマホサイズ、タブレットサイズ、pcサイズと、
全サイズの画面幅でデザインの確認ができるからです。
例えば、以下に紹介するのは、
僕のブログですが、
こんな風にパソコン上で、
スマホサイズの画面幅でのデザインを、
確認できます。
また、もちろんタブレットサイズぐらいの、
画面幅でのデザインも確認することが、
できます。
そしてパソコンは言わずもがなですね、
パソコン上でブラウザ開いたらもう、
パソコンサイズのデザインは確認できるので。
ということで、グーグルクロームの、
デベロッパーツールというのを使えば、
レスポンシブデザインを確認することができます。
ちなみにfirefoxなどでも、今紹介した、
デベロッパーツールと似たような機能が、
あるので、そちらでも確認できます。
とはいえ、ここではわかりやすいように、
クロームのデベロッパーツールについて
話します。
スポンサードサーチ
デベロッパーツールでレスポンシブデザイン確認手順
で、このデベロッパーツールの使い方ですが、
まずはデベロッパーツールを開きましょう。
次に、デベロッパーツールを開いたら、
デベロッパーツールの画面の上部に、
以下のようなアイコンが並んでます。
このアイコン群の、左から２番目の、
スマホとタブレットが重なったような、
２つの長方形が重なったアイコンをクリックしましょう。
すると、スマホサイズや、
タブレットサイズに画面幅を切り替えれます。
あとはそれぞれのサイズでのデザインを、
確認して、cssを書き換えたりして、
あなたが気に入るようなデザインにしていきましょう。
ということで、デベロッパーツールの
レスポンシブデザイン確認方法のための、
使い方に関しては以上です。
ちなみに、余談ですがデベロッパーツールの画面と、
ブラウザの画面の境界線上にマウスを持ってきて、
ドラッグして引っ張り画面幅を変えることでも確認できます。
なので、どっちかあなたがやりやすい方法で、
やってみてください。
スポンサードサーチ
まとめ
それではまとめに入ります。
レスポンシブデザインを確認する方法は、
グーグルクロームの、デベロッパーツールを
使えば一発でいけます。
ということで、あなたもいますぐに、
グーグルクロームのデベロッパーツールを開き、
いろんなサイズでのデザインを確認してみましょう。
すると、あなたはwebページの、
デザインを好きにいじれるように
なっていきますよ。
ということで、レスポンシブデザインの、
確認方法でした。
読んでいただいて、ありがとうございました。
チャーさん
