【Bubble開発】CSSを使って高さ0.5pxの区切り線を作る方法

Bubbleでデザインを整える際、「微細な区切り線（ライン）」を作りたい時にちょっとした方法を使うことで実装できます。

通常のBox要素やShapeでは最低1pxからしか高さを設定できませんが、下記方法を行うことで、“0.5px” のような繊細なラインを表現できます。

また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。

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

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

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

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

EPICs株式会社の特徴

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

実装手順

1. 区切り線用のGroup要素を用意
2. 「Make this element fixed-height」をONにして「Height」を.5に設定
3. 必要に応じて「幅100%」「背景色」を設定して線に見せる
4. 枠線で調整したい場合は、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 というClass名を設定します。

注意点：BubbleのUI上では枠線の太さに 0.5px を設定できないため、CSSで指定する必要があります。

4. よくある利用シーン

• セクションの間の「うすい区切り線」
• モバイルUIでの「リストアイテムの区切り」
• データの表示エリアと見出しの間のアクセント

0.5pxのラインは、UIに繊細な印象を与えるため、プロダクトのデザインレベルを一段引き上げることができます。

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

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

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

氏名

次へ

法人名

戻る次へ

メールアドレス

戻る次へ

電話番号

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

戻る

まとめ

• Bubbleでは、Heightに.5と入力することで「0.5pxの高さ」が適用可能
• 「Make this element fixed-height」をONにするのが必須
• より柔軟に線をコントロールしたい場合は、CSSで border-width: 0.5px を指定
• UI上では不可能な「極細ライン」を実現するには、Visual設定 + CSS連携が鍵

アプリ開発は、UIの印象が大切です。
少しの工夫を凝らして、より繊細なUIの実装を行うことで、開発するアプリのレベルをあげることができます。