みなさんこんにちは!おさかなです!
今回は「Responsive Web Design JP」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・レスポンシブデザインのサンプルを探している方
・スマホのデザインを考え中の方
・Webデザイナー・エンジニアの方
「Responsive Web Design JP」って何?
「Responsive Web Design JP」とは、日本の秀逸なレスポンシブデザインのWebサイトがまとめられているページのことです。実際にサイトを訪問すれば、コードのチェックも可能です!(いいね!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/d8b813f6a09f001b26ff76a24fb90018.jpg)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-top-160x90.png)
実際に使ってみよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/04/responsive.png)
ページをスクロールすると、色々なデザインが表示されます!(おお!)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive1.png)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive2.png)
(これ美味しそう…🍫)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive3.png)
気になるデザインをクリックすると…?
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-click.png)
こんな感じで、実際のサイトに飛べます!(いい感じ!)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-site.png)
嬉野茶時っていうお茶🍵のサイト、和っぽくて個人的に好きです!
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-tea.png)
ちなみにサイトを開いた状態で「F12」キーを押して、デベロッパーツールを開くと、ソースコードが見れます!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-code.png)
使用されているカラー、フォントなども確認できます!(お〜!)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-dev.png)
ちなみに、ショートカットキー「Ctrl」+「U」からも、ページのソースを見れます。
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-u-code.png)
右のメニューから「CATEGORY」を選択すると…?
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-categ.png)
こんな感じで「アパレル」「インテリア」「芸能」など、カテゴリ別にサイトを検索できます!(便利)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-cate.png)
「家電・AV機器」を選択すると、こんな感じで表示されました!(商品欲しくなっちゃう!)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-kaden.png)
オムロンの血圧計とかもありました!(電気屋さん行きたい)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-ketuatu.png)
メニューから「COLOR」を選択すると…?
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-color.png)
デザインに使用されている「カラー」ごとに検索できます!(いいね!)
![](https://osakanav.com/wp-content/uploads/2022/04/respoinsive-color1.png)
黄色はこんな感じ!(おおー!)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-yellow.png)
メニューから「TECHNIQUE」を選択すると…?
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-tec.png)
jQueryやVue.jsなど、サイトに使用されている技術ごとに検索ができます!
(個人的には、これが一番すごいと思いました!)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-tec1.png)
Reactを押すと、こんな感じ!
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-react.png)
メニューの一番下にある「TYPE」を押すと…?
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-type.png)
「EC」「コーポレート」サイトや「ブログ」など、サイトの種類別に検索できます!(助かる)
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-type1.png)
ECサイトはこんな感じです!(わあ〜!)
みなさんも是非サイトデザインの参考にしてみてください!
![](https://osakanav.com/wp-content/uploads/2022/04/responsive-ec.png)
![](https://osakanav.com/wp-content/uploads/2021/12/nippon-top-160x90.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
レスポンシブって、たまに噛む。
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
レスポンシブ…レスポンシブ…。
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/02/canva-160x90.jpg)