こんにちは！
EPICs株式会社です。
今回は、Bubbleで、デバイスの画面幅に応じて横スクロールバーを自動的に表示・非表示にする方法をご紹介します。
これを実装することで、ユーザーの画面サイズに合わせたデザインを提供することができます！
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
・スクロールバーが表示されている状態
・スクロールバーを非表示にした状態
以下の手順で実装します。
- ID属性の設定を有効にする
- 対象要素にIDを割り当てる
- カスタムCSSの追加
実装手順
1. ID属性の設定を有効にする
まず、BubbleエディターでID属性を使用可能にします。
設定(Settings)タブのGeneralセクションにある「Expose the option to add an ID attribute to HTML elements」にチェックを入れてください。
2. 対象要素にIDを割り当てる
次に、横スクロールバーの表示・非表示を制御したい要素（例えば、Repeating Groupなど）を選択し、その要素の「ID Attribute」フィールドに任意のID名（例：scrollable-group）を入力します。
3. カスタムCSSの追加
ページ内にHTMLエレメントを配置し、以下のCSSコードを追加します。
このコードは、画面幅に応じて横スクロールバーの表示を制御します。
・追加するhtmlコード
<style>
#scrollable-group {
overflow-x: auto;
white-space: nowrap;
}
</style>
上記のCSSでは、overflow-x: auto;を設定することで、コンテンツが要素の幅を超えた場合にのみ横スクロールバーが表示されます。
※overflow-x:scroll ;にするとスクロールバーが残った状態になります。
また、white-space: nowrap;を追加することで、内部のコンテンツが折り返されずに横方向に並ぶようになります。
最後に、プレビューモードで画面幅を変化させながら、横スクロールバーの表示・非表示が期待通りに動作するか確認しましょう。
必要に応じて、CSSやレイアウト設定を微調整してください。
この手法により、デバイスの画面幅に応じて横スクロールバーを自動的に表示・非表示にすることが可能です。
ユーザーが快適にページを見られるように、ぜひ活用してみてください。
