# レスポンシブデザインについて、どのように作っているか伺いたいです。 ・PC用とSP用のページを作る ...... **URL:** \ **Category:** bubble\ **Created:** [2021 年 2 月 2 日午前 8:42 UTC](https://www.nocode-faq.com/t/topic/326 "2021-02-02T08:42:51Z")\ **Posts on this page:** 2\ **Page:** 1
**Author:** ![Question\_user](https://avatars.discourse-cdn.com/v4/letter/q/53a042/32.png) [@Question\_user](https://www.nocode-faq.com/u/Question_user)\ **Post date:** [2021 年 2 月 2 日午前 8:42 UTC](https://www.nocode-faq.com/t/topic/326/1 "2021-02-02T08:42:51Z")
レスポンシブデザインについて、どのように作っているか伺いたいです。 ・PC用とSP用のページを作る ・レスポンシブデザインのタブ？から対応する ・その他 現在1200×965のみで、SP用、mac pro用を用意していきたい次第です ---
**Author:** ![Answer\_user](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@Answer\_user](https://www.nocode-faq.com/u/Answer_user)\ **Post date:** [2021 年 2 月 2 日午前 8:42 UTC](https://www.nocode-faq.com/t/topic/326/2 "2021-02-02T08:42:52Z")
回答者１ レスポンシブのタブからいじりまくっています！ エレメントのGroup化の階層構造を工夫することで、なんとかいい組み合わせを探す作業ですね。笑 正直、bubbleのレスポンシブ対応はそこで８割ぐらい時間使っている気がします。 回答者２ おっしゃる通り、PC用とSP用に分けて作ることもResponsiveに分けて作ることもどちらも可能です。 前者は細かく調整が可能ですがメンテナンス性が悪い（変更点が出るたびに×2をしないといけない）。 後者は1px単位での調整不可。 それでも前者は気持ちよく設定が出来る分オススメです。（PC版からまるまるPageをコピーしてしまえばUIの変更はさほど苦ではない為） もし後者でResponsiveを進めるなら、回答者１さんがおっしゃるように「親Group」を中心に考えてみてください。 よくやりがちなのが、親がきちんと出来ていないのに子（Groupの上に乘っているインプットやボタンなど）をなんとかしようとしてカオスになるパターンです。 「親がこう縮まるとうまくいくな」というイメージをしっかり持ってから調整に取り掛かってみましょう。 CSSについては色々調べてみたのですが、複数種類というのがイメージできておりません。 各ElementのID AttributeにてCSSを仕込むことは可能です（画像の一番下）。 これはpageそのものにもIDが存在しますので該当となり、例えばPage自体＋そのページにあるElementどちらにもそれぞれあてがうことが可能になります ## 参考画像 ![image (42).png](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/1X/f8512e797942dde9b786df122c902b28bde17f12.png)