# 2カラムページのレスポンシブ時の処理について質問です。 **URL:** \ **Category:** bubble\ **Tags:** フロントエンド, レスポンシブ関連フロントエンド\ **Created:** [2021 年 4 月 28 日午前 1:20 UTC](https://www.nocode-faq.com/t/topic/1489 "2021-04-28T01:20:41Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![shogo](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@shogo](https://www.nocode-faq.com/u/shogo)\ **Post date:** [2021 年 4 月 28 日午前 1:20 UTC](https://www.nocode-faq.com/t/topic/1489/1 "2021-04-28T01:20:41Z")
PC、タブレット時に、 左にフローティングサイドバー、右側に作業用スペースの2カラム構成のページを作成しました。 左側のサイドバーとヘッダーについては、下記画像のようにワークフローを組みスマホサイズにした際にhideされる処理を作ったのですが、あくまでhideなのでサイドバーとヘッダーがあった箇所にスペースができてしまいます。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/451bd2338aa92cfe39ff6cb957c9ac18e683149b.png) ここからが質問なのですが、この場合の対応として ①「スマホサイズになった際に、右側の作業カラムをfull-widthにし、左側のサイドバーにオーバーレイするようにする。」のような処理をワークフローで組むのが解決策かと思ったのですが、やり方が全く分からず、ご教授いただけますでしょうか。 ②また上記やり方ではなくて、スマホサイズ用の右側の作業カラムに相当するエレメントを用意して、画面サイズが小さくなったらそちらを表示する。みたいな形も取れるかも？と思いました。 こちらはエレメントの二重管理になるのであまりやりたくはないとは思っているのですが、もし①が不可能なようでしたらこちらを採用するのはスジが良さそうでしょうか？ ---
**Author:** ![lingmu](https://avatars.discourse-cdn.com/v4/letter/l/e5b9ba/32.png) [@lingmu](https://www.nocode-faq.com/u/lingmu)\ **Post date:** [2021 年 4 月 29 日午前 11:13 UTC](https://www.nocode-faq.com/t/topic/1489/2 "2021-04-29T11:13:13Z")
念のため、、、以前お伝えした方法では上手くいかなかったということでしょうか？ ①FloatingGroupと同じ形（正確には横幅があっていればよい）のShapeを用意する ②①のShapeをFloatingGroupと全く同じ位置にセットする ③UI BuilderからResponsiveモードに変える ④Shapeエレメントをクリック ⑤Add hiding ruleをクリック ⑥Hide when parent width \<= 値（この場合は414） これでどうでしょうか？？ ---
**Author:** ![shogo](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@shogo](https://www.nocode-faq.com/u/shogo)\ **Post date:** [2021 年 4 月 29 日午後 1:56 UTC](https://www.nocode-faq.com/t/topic/1489/3 "2021-04-29T13:56:55Z")
@lingmu さん ありがとうございます。 以前教えていただいた方法で、hideはできたのですが視覚的に消えただけで、縮めたときに白いスペースが残ってしまうことが問題となっていました。。 ↓ 見てみたら、ShapeのところがGroupになっていたのですが、こちらが原因と考えられるでしょうか？？ ---
**Author:** ![lingmu](https://avatars.discourse-cdn.com/v4/letter/l/e5b9ba/32.png) [@lingmu](https://www.nocode-faq.com/u/lingmu)\ **Post date:** [2021 年 4 月 30 日午前 2:17 UTC](https://www.nocode-faq.com/t/topic/1489/4 "2021-04-30T02:17:29Z")
難しいですね。。。FloatingGroup、Group自体が別のGroupに組み込まれてしまっていて、調整できないとかでしょうか。。。