# レイアウトが崩れる

**URL:** <https://www.nocode-faq.com/t/topic/4259>\
**Category:** Adalo\
**Created:** [2024 年 5 月 8 日午後 2:18 UTC](https://www.nocode-faq.com/t/topic/4259 "2024-05-08T14:18:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pinewellkindtree](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/pinewellkindtree/32/8385_2.png) [@pinewellkindtree](https://www.nocode-faq.com/u/pinewellkindtree)\
**Post date:** [2024 年 5 月 8 日午後 2:18 UTC](https://www.nocode-faq.com/t/topic/4259/1 "2024-05-08T14:18:41Z")

</div>

添付画像のように、レイアウトが崩れてしまうのですが、対処法おわかりの方いらっしゃいますでしょうか？  
すべてをグルーピングしてもだめでした。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6c6e1d049e5c2ae7a492bb0f4c4b37ab15076fe2.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/3/3e4c74acfe3652ee650c246289c327838493bcf7.jpeg)

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 5 月 10 日午前 2:14 UTC](https://www.nocode-faq.com/t/topic/4259/2 "2024-05-10T02:14:31Z")

</div>

レイアウトみただけだとなんとも言えないですが、画像の中にテキストが入ったり、メンバーが上にいったりしているってことですかね？

やり方は、いろいろあると思いますが、  
多くの場合、グルーピングをしすぎていたりすることが原因だと思います。

どちらかというと、全てのグルーピングを外して、画像のような構成にすると上手く行くのではないかと思います。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d8d4f6a18fa13501a9783a2549be7c7918cade86.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/bddb3899154c1e75111281c5b6179d0e48ec7d86.png)

公式動画でもグルーピングそこまで多用してないと思うので、こちらのデザインの作り方など参考にしてもらえれば。

[![](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/c085f285608e47034629df905dbf7b124e97477f.jpeg "Beginner's Guide to Responsive Design in Adalo") ](https://www.youtube.com/watch?v=_xYk2cef61U)

---

<div class="post-metadata">

**Author:** ![pinewellkindtree](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/pinewellkindtree/32/8385_2.png) [@pinewellkindtree](https://www.nocode-faq.com/u/pinewellkindtree)\
**Post date:** [2024 年 5 月 11 日午前 12:07 UTC](https://www.nocode-faq.com/t/topic/4259/3 "2024-05-11T00:07:45Z")

</div>

ご返信ありがとうございます！

・グループ解除  
・Stay Fixedにする  
・透明な横線を入れる

をやったのですが、なぜかNameが画像に食い込んでしまいますね…。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/7/77b84f9d61a9063dc07abf711ad370eb17c0664c.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/fffdaf2335e6a82d2f66db7512139e53342b857a.jpeg)

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 5 月 11 日午前 2:48 UTC](https://www.nocode-faq.com/t/topic/4259/4 "2024-05-11T02:48:00Z")

</div>

> [@pinewellkindtree](#):
>
> ・透明な横線を入れる

線は、画面の端から端まで入れる必要ありますよ。

---

<div class="post-metadata">

**Author:** ![pinewellkindtree](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/pinewellkindtree/32/8385_2.png) [@pinewellkindtree](https://www.nocode-faq.com/u/pinewellkindtree)\
**Post date:** [2024 年 5 月 11 日午前 4:06 UTC](https://www.nocode-faq.com/t/topic/4259/5 "2024-05-11T04:06:34Z")

</div>

ありがとうございます！

透明な線を端から端まで入れたり、ちょっとはみ出してみたり、文字をはみ出してみたり、いろいろ試行錯誤したのですが、やはり崩れてしまいますね。。。  
謎です。。。

 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/489600a180effa31d486899a4e5544f37839ccdb.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/2/2a09fa12d084606267df793cbea65f051cb8ba38.jpeg)

---

<div class="post-metadata">

**Author:** ![1eo1etitbe](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/1eo1etitbe/32/5678_2.png) [@1eo1etitbe](https://www.nocode-faq.com/u/1eo1etitbe)\
**Post date:** [2024 年 5 月 11 日午前 4:44 UTC](https://www.nocode-faq.com/t/topic/4259/6 "2024-05-11T04:44:10Z")

</div>

この類のレイアウト崩れはAdaloの独特の癖のようなものがあるので、↓のようなググって出てくるようなテクニックを一通り試してみて、

> **[ノーコード入門 | Adaloで使える！レイアウト調整のコツ3選｜ノーコード部｜Bubble, PowerApps, Adalo, Webflowなどで受託開発](https://note.com/nocode_div/n/nb0b1d762a930)**
>
> こんにちは、ノーコード部の鴨野です。 Adaloでは、画面の横幅に合わせて自動でコンポーネントの位置・横サイズを調整されるようになっています。 特に設定をしなくても自動で調整をしてくれるのは便利ですよね。 しかし一方で、どのように調整されるかはコンポーネントの配置によって自動判断されるため、思い通りのレイアウトにならない場合も多々あります。 今回は、そんな時に使えるレイアウト調整のコツを3つご紹介します。 ちょっとしたコツを押さえるだけで簡単に整えることができるので、...

それでもダメな場合は、発想を変えて、Adaloの癖を踏まえてやろうとしているレイアウトを変更する、こちらから合わせに行く姿勢が大切になってきます。

---

<div class="post-metadata">

**Author:** ![pinewellkindtree](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/pinewellkindtree/32/8385_2.png) [@pinewellkindtree](https://www.nocode-faq.com/u/pinewellkindtree)\
**Post date:** [2024 年 5 月 11 日午後 1:14 UTC](https://www.nocode-faq.com/t/topic/4259/7 "2024-05-11T13:14:25Z")

</div>

@1eo1etitbe  
ありがとうございます！  
Rectangleを配置してもだめだったので、スクリーンを複製してつくりなおしたらいけました…！謎です。  
参考サイトのご共有助かりました！

---

<div class="post-metadata">

**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\
**Post date:** [2024 年 5 月 12 日午前 4:43 UTC](https://www.nocode-faq.com/t/topic/4259/8 "2024-05-12T04:43:11Z")

</div>

> [@1eo1etitbe](#):
>
> この類のレイアウト崩れはAdaloの独特の癖のようなものがあるので、↓のようなググって出てくるようなテクニックを一通り試してみて、
> 
> [ノーコード入門 | Adaloで使える！レイアウト調整のコツ3選｜ノーコード部｜Bubble, PowerApps, Adalo, Webflowなどで受託開発](https://note.com/nocode_div/n/nb0b1d762a930)

リセットで解決かーｗ 忘れてました。この辺は、覚えていくしかにないですね。ナイスコメントです。
