ノーコードツール「Bubble」で要素を自由自在にレイアウトするには慣れとちょっとしたコツが必要。
筆者がBubble触り始め当初はよくWebサイトで見かけるヘッダーレイアウトを再現するのに苦戦してました…。
しかしある日、BubbleのAlign to parentの使い方を覚えてから劇的にレイアウトが楽になりました。見える景色が変わりました。
そこで今回は、下記のようなレイアウト（左端にアイコン、中央にテキスト）をBubbleで再現する方法をご紹介します！
やり方が分かればなんてことはないので、ぜひ実際に手を動かしながら試してみてくださいませ。
動画解説バージョンはこちら！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
EPICs株式会社の特徴
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
ざっくりの課題でも
プロが無料で提案
プロが無料で提案
目次
実装手順
以下の手順で実装します。
- Group headerを配置する
- Group headerのLayoutにAlign to parentを設定する
- Group header直下にIconとTextを入れる
- IconとTextの位置をそれぞれLayoutで設定する
Elements Three
今回作るヘッダーは上記の構造になります。
Group headerにAlign to parentを設定する
今回の肝。Group headerのLayoutを以下のように設定します。
スクロールできます
| 設定項目 | 設定内容 |
|---|---|
| Container layout | Align to parent |
| Padding LeftとRight | 左右に最低限の余白を設けるために16pxなど設定する |
IconとTextの位置をLayoutで設定する
Group headerの中に、IconとTextを入れます。サイズ感は好きなように調整してもらったら、各エレメントのLayoutを以下のように設定して位置を変えましょう。もしかしたらGroup headerにエレメントを挿入した段階で自動で設定されるかもですが（笑）
IconのLayout設定
左端マークを選択しましょう。
TextのLayout設定
上下中央マークを選択しましょう。
