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

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

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

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

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

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

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

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

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

• 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
• 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
• リリース後の改修スピードも早い → PDCAを早く回せる

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

ノーコード開発サービスについて詳しく知る

EPICs株式会社の特徴

• 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
• 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
• マーケティングまで支援が可能

実装手順

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

Elements Three

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

＜無料＞資料ダウンロード

【ノーコード開発】お役立ち資料３点セット

「ノーコード開発会社の選び方」「EPICs株式会社ノーコード開発の実績集」
「受託開発サービス概要」が同梱されたお役立ち資料セット

氏名

次へ

法人名

戻る次へ

メールアドレス

戻る次へ

電話番号

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

戻る

Group headerにAlign to parentを設定する

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

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

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

IconのLayout設定

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

TextのLayout設定

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