みなさんこんにちは！おさかなです！
今回は「レスポンシブWebデザインチェックツール」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・Webサイトのレスポンシブデザインを確認したい方
・スマホ・タブレット・PCの表示を一括チェックしたい方
・Webデザインを学習中の方
「レスポンシブWebデザインチェックツール」って何？
「レスポンシブWebデザインチェックツール」とは、スマホ・タブレットなどで表示した場合の「見え方・デザイン」が一括チェックできるサイトのことです。URLを入力するだけで、誰でも簡単に確認できます！(いいね👍)
https://osakanav.com/responsive-web-design-jp
実際に使ってみよう！
レスポンシブ表示を確認しよう！
それでは早速サイトにアクセスしましょう！
「iPhone7」をはじめ、「iPad」「Macbook Air 11」など、実際の端末での表示がわかります！(ちなみにAndroidは無さそう…💦)
まずは、左上にある「ボックス」にURLを入れます。
あとは「RWO Check」を押すだけ！(えい！)
すると…？こんな感じで、入力したURLのサイトが表示されました！(おお！)
通常のサイト同様、きちんとリンクも機能しており、トップページ以外も確認できます。(ふむふむ…。)
https://osakanav.com/make-my-persona
(しっかり睡眠…💤)
オプション機能
ページ上部にある「スマホマーク」を押すと…？
こんな感じで、スマホ本体の枠組みを取り外せます。
デザイン自体を確認したいときには、良いですね♪(うんうん！)
ページ上部の「矢印マーク」を押すと…？
こんな感じで、「スマホを横にしたときの表示」もわかります。(助かる〜)
「横表示」は、意外と見落としがちなので、これは便利です！
ページ上部の「スクロールバー」を動かすと…？
こんな感じで、「拡大・縮小」が可能です。
機種別に比較したい場合などにご活用ください…！(お疲れ様です🍵)
おさかな！レスポンシブver.
なんだそれ。笑
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
https://osakanav.com/web-design-clip
