BubbleのFloatingGroupを中央寄せに配置する方法

2024年1月24日2024年5月20日

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツール「Bubble」で、ページ最下部に固定メニューなどを配置したいときに重宝する「FloatingGroup」。

現在のBubbleの仕様では、FloatingGroupのAppearanceやLayoutタブの設定だけで中央寄せに配置する方法が分からず困っていましたが、先日いろいろ試行錯誤して中央寄せにするテクニックを発見したのでご紹介します。

実際の画面キャプチャ付きで解説するのでぜひ試してみてくださいませ！

動画解説バージョンはこちら！

【日本最大級のノーコード開発実績】
無料でアプリ・システム開発の相談を受付中

実装イメージ

今回ご紹介するテクニックを使うと、下記のようなFloatingGroupで作ったメニューをPCでもスマホで閲覧したときでも中央寄せに配置できます。

FloatingGroupを中央寄せに配置するときのポイントは以下の通り。太字箇所が特に重要です。

FloatingGroupはRow、container elementはcenteredで設定する
FloatingGroupを横幅100%に設定する
FloatingGroupにfixed-height設定する（55pxなど）
FloatingGroupの中にGroupを入れ（Row、container elementはspace around）、必要に応じてmin-widthやmax-widthを設定する
そのGroupの中にメニュー項目を入れる（複数）

今回紹介している中央寄せの方法は、上記のようなElements Threeでやってます。あわせて参考までにどうぞ。

FloatingGroupのLayoutを以下のように設定します。

スクロールできます

設定項目	設定内容
Container layout	Row
Container alignment	Centered
Make this element fixed-width	チェックを入れる
width	100%
Padding LeftとRight	左右に最低限の余白を設けるために10pxなど設定する

FloatingGroupのAppearanceの「Horizontally float relative to」で中央寄せを設定できたら理想なのですが、執筆時点ではLeftとRightしか選択肢がなく痒いとこに手が届かないなあと思いました。

したがって、上記のようにFloatingGroup自体は横幅100%にしておいて、その子要素を中央寄せに設置するという考えにいたりましたわけです。

次に、FloatingGroup直下にGroupエレメントを入れ、そいつのLayoutを以下のように設定していきます。

スクロールできます