みなさんこんにちは!おさかなです!
今回は「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サイトはこんな感じです!(わあ〜!)
みなさんも是非サイトデザインの参考にしてみてください!
レスポンシブって、たまに噛む。
レスポンシブ…レスポンシブ…。
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!