Bubbleでデザインを整える際、「微細な区切り線（ライン）」を作りたい時にちょっとした方法を使うことで実装できます。
通常のBox要素やShapeでは最低1pxからしか高さを設定できませんが、下記方法を行うことで、“0.5px” のような繊細なラインを表現できます。
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装手順
- 区切り線用のGroup要素を用意
- 「Make this element fixed-height」をONにして「Height」を.5に設定
- 必要に応じて「幅100%」「背景色」を設定して線に見せる
- 枠線で調整したい場合は、CSSで border-width: 0.5px を指定
実装方法
1. 高さ0.5pxの区切り線を設定する
画像のとおり、要素のプロパティで以下のように設定します。
- Make this element fixed-height にチェックを入れる
- Height を .5 に設定
この設定で、極細の水平線が1本表示される状態になります。
2. 見た目を線らしくする（色や幅の設定）
次に、線として見えるようにスタイルを整えます。
- 背景色（background color）：グレーや薄い黒などに設定
- 幅（width）：100% にして親要素いっぱいに広げる
- 左右のマージン：必要に応じて調整
これにより、意図した位置にしっかりと「線」らしく表示されます。
3. 枠線で制御する場合のCSS設定
さらに、線を枠線（border）で表現したい場合は、以下のようにCustom CSSで調整するのが有効です。
CSSコード例
.border-line {
border-bottom: 0.5px solid #ccc !important;
}
このスタイルを適用するには、対象の要素に border-line というClass名を設定します。
注意点：BubbleのUI上では枠線の太さに 0.5px を設定できないため、CSSで指定する必要があります。
4. よくある利用シーン
- セクションの間の「うすい区切り線」
- モバイルUIでの「リストアイテムの区切り」
- データの表示エリアと見出しの間のアクセント
0.5pxのラインは、UIに繊細な印象を与えるため、プロダクトのデザインレベルを一段引き上げることができます。
まとめ
- Bubbleでは、Heightに.5と入力することで「0.5pxの高さ」が適用可能
- 「Make this element fixed-height」をONにするのが必須
- より柔軟に線をコントロールしたい場合は、CSSで border-width: 0.5px を指定
- UI上では不可能な「極細ライン」を実現するには、Visual設定 + CSS連携が鍵
アプリ開発は、UIの印象が大切です。
少しの工夫を凝らして、より繊細なUIの実装を行うことで、開発するアプリのレベルをあげることができます。
