よくあるヘッダーレイアウトをBubbleのAlign to parentで作る方法

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

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

ノーコードツール「Bubble」で要素を自由自在にレイアウトするには慣れとちょっとしたコツが必要。

筆者がBubble触り始め当初はよくWebサイトで見かけるヘッダーレイアウトを再現するのに苦戦してました…。

しかしある日、BubbleのAlign to parentの使い方を覚えてから劇的にレイアウトが楽になりました。見える景色が変わりました。

そこで今回は、下記のようなレイアウト(左端にアイコン、中央にテキスト)をBubbleで再現する方法をご紹介します!

やり方が分かればなんてことはないので、ぜひ実際に手を動かしながら試してみてくださいませ。

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

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

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

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

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

実装手順

以下の手順で実装します。

  1. Group headerを配置する
  2. Group headerのLayoutにAlign to parentを設定する
  3. Group header直下にIconとTextを入れる
  4. IconとTextの位置をそれぞれLayoutで設定する

Elements Three

今回作るヘッダーは上記の構造になります。

Group headerにAlign to parentを設定する

今回の肝。Group headerのLayoutを以下のように設定します。

スクロールできます
設定項目設定内容
Container layoutAlign to parent
Padding LeftとRight左右に最低限の余白を設けるために16pxなど設定する

IconとTextの位置をLayoutで設定する

Group headerの中に、IconとTextを入れます。サイズ感は好きなように調整してもらったら、各エレメントのLayoutを以下のように設定して位置を変えましょう。もしかしたらGroup headerにエレメントを挿入した段階で自動で設定されるかもですが(笑)

IconのLayout設定

左端マークを選択しましょう。

TextのLayout設定

上下中央マークを選択しましょう。

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

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

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

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

    氏名

    法人名

    メールアドレス

    電話番号

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

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