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

2024年1月24日

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

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

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

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

また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

EPICs株式会社の特徴

ざっくりの課題でも
プロが無料で提案

実装イメージ

今回ご紹介するテクニックを使うと、下記のような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を以下のように設定していきます。

スクロールできます