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

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

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

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

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

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

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

目次
無料で資料をダウンロード

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ
【一分で完了】資料をダウンロード

実装イメージ

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

FloatingGroupを中央寄せに配置するポイント

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

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

FloatingGroupの設定

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

スクロールできます
設定項目設定内容
Container layoutRow
Container alignmentCentered
Make this element fixed-widthチェックを入れる
width100%
Padding LeftとRight左右に最低限の余白を設けるために10pxなど設定する

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

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

FloatingGroup直下のGroupの設定

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

スクロールできます
設定項目設定内容
Container layoutRow
Container alignmentSpace around
Min widthお好みでデザインに合わせて320pxなど
Max widthお好みでデザインに合わせて768pxなど
無料で資料をダウンロード

ノーコード開発サービスのご案内

日本最大級のノーコード開発実績

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    目次