【bubble】初心者必見！Groupの使い方【part1】

こんにちは！ノーコーダーのIKDです。

今回は、bubbleで最重要と言っても過言ではない、グループの配置方法・編集方法などをお伝えしていきます。

グループが使えないと、良いサービスは作れないと言えるでしょう。

グループは覚えることが多いので、何パートかに分けて解説していきます。

bubbleって何？という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください！

と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。

グループの配置方法

まずは、bubbleのホーム画面から画像の矢印のところにあるNew appをクリックして新しいアプリを作成してください。

グループの配置方法は、画像のようにテキストをクリックし、右の空白にドラッグ＆ドロップするだけです！

※グループはデフォルトで透明なので、初めから色をつけた状態で表示しています。

初めは、透明な枠になっているので気をつけてください！

グループの編集方法

まずは、基本的な編集方法をお伝えしていきます。

1. グループの名前を変えることができます。(しなくても問題はありませんが、名前をつけた方がワークフロー設定の時に楽になります。)
2. グループが表示できるタイプを設定できます。
3. グループに表示されるべきデータの種類を設定できます。(最初は大丈夫)
4. グループをクリックできなくできます。

②,③は初心者のうちは少し難しいので、動画教材などで実例とともに学んでいきましょう。

スタイルの編集

今回の最後は、いつも通りスタイルの編集方法を解説していきます。

1. ここを空白にすることで、スタイルを編集できるようになります。
2. グループに色をつけたりできます。(グループを重ねたりするときは、わかりにくくならないように最初は設定しましょう)
3. 背景色を変更できます。
4. グループの枠線を上下左右を独立して編集できます。
5. グループの枠線を上下左右一気につけられます。
6. グループの角を丸くできます。
7. グループの内外に影を落とすことができます。
8. これをチェックすると、Previewで見えなくなります。
9. 幅を固定することができます。
10. ページを狭くした時に、自動で調整してくれます。
11. ページを広くした時の最大幅を固定できます。
12. ページ幅が指定した幅より狭くなると、自動で左右の余白を消してくれます。

この中だと、⑧以降が少しわかりにくいと思うので、是非自分で試してみてください！

どうしてもわからない場合は、TwitterのDMに連絡をください！いつでも対応しています。

まとめ

今回は、グループの使い方の基本的なことを抑えてきました。

次回以降は、今までやってきたテキストやボタンなどと組み合わせた使い方を紹介していきます。

今回は以上です。また次回お会いしましょう〜