みなさんこんにちは!おさかなです!
今回は「Responsive Web Design JP」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・レスポンシブデザインのサンプルを探している方
・スマホのデザインを考え中の方
・Webデザイナー・エンジニアの方
「Responsive Web Design JP」って何?
「Responsive Web Design JP」とは、日本の秀逸なレスポンシブデザインのWebサイトがまとめられているページのことです。実際にサイトを訪問すれば、コードのチェックも可能です!(いいね!)


実際に使ってみよう!
それでは早速サイトにアクセスしましょう!

ページをスクロールすると、色々なデザインが表示されます!(おお!)


(これ美味しそう…🍫)

気になるデザインをクリックすると…?

こんな感じで、実際のサイトに飛べます!(いい感じ!)

嬉野茶時っていうお茶🍵のサイト、和っぽくて個人的に好きです!

ちなみにサイトを開いた状態で「F12」キーを押して、デベロッパーツールを開くと、ソースコードが見れます!(ふむふむ…。)

使用されているカラー、フォントなども確認できます!(お〜!)

ちなみに、ショートカットキー「Ctrl」+「U」からも、ページのソースを見れます。

右のメニューから「CATEGORY」を選択すると…?

こんな感じで「アパレル」「インテリア」「芸能」など、カテゴリ別にサイトを検索できます!(便利)

「家電・AV機器」を選択すると、こんな感じで表示されました!(商品欲しくなっちゃう!)

オムロンの血圧計とかもありました!(電気屋さん行きたい)

メニューから「COLOR」を選択すると…?

デザインに使用されている「カラー」ごとに検索できます!(いいね!)

黄色はこんな感じ!(おおー!)

メニューから「TECHNIQUE」を選択すると…?

jQueryやVue.jsなど、サイトに使用されている技術ごとに検索ができます!
(個人的には、これが一番すごいと思いました!)

Reactを押すと、こんな感じ!

メニューの一番下にある「TYPE」を押すと…?

「EC」「コーポレート」サイトや「ブログ」など、サイトの種類別に検索できます!(助かる)

ECサイトはこんな感じです!(わあ〜!)
みなさんも是非サイトデザインの参考にしてみてください!



レスポンシブって、たまに噛む。

レスポンシブ…レスポンシブ…。
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
