【レスポンシブデザイン】のサンプルまとめ【Responsive Web Design JP】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Responsive Web Design JP」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・レスポンシブデザインのサンプルを探している方
・スマホのデザインを考え中の方
・Webデザイナー・エンジニアの方

「Responsive Web Design JP」って何?

Responsive Web Design JP」とは、日本の秀逸なレスポンシブデザインのWebサイトがまとめられているページのことです。実際にサイトを訪問すれば、コードのチェックも可能です!(いいね!)

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。
【HTML/CSS】コードをコピーするだけで、デザイン実装できちゃう!【Nomad Code】とは?
みなさんこんにちは!おさかなです!今回は「Nomad Code」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・HTML/CSSを学習している方・Webデザインを学んでいる方・Webサービ...

実際に使ってみよう!

それでは早速サイトにアクセスしましょう!

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

(これ美味しそう…🍫)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【日本の伝統色】和風デザインで使えるカラー・配色が見つかる!【NIPPON COLORS】とは?
みなさんこんにちは!おさかなです!今回は「NIPPON COLORS」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・日本の伝統デザインをしたい方・和風サイトを検討中の方・日本風の配色を知...
おさかな
おさかな

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

ナビまる
ナビまる

レスポンシブ…レスポンシブ…。

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

誰でもかんたんにプロっぽいデザインが作れちゃう?「Canva」とは?
みなさんこんにちは!おさかなです!今回は「Canva」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・デザインソフトを探している方・テンプレートからデザインをしたい方・クリエーターの方...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました