こんにちは！
EPICs株式会社です。
今回は、Bubbleで、デバイスの画面幅に応じて横スクロールバーを自動的に表示・非表示にする方法をご紹介します。
これを実装することで、ユーザーの画面サイズに合わせたデザインを提供することができます！
実装イメージ
・スクロールバーが表示されている状態
・スクロールバーを非表示にした状態
以下の手順で実装します。
- 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やレイアウト設定を微調整してください。
この手法により、デバイスの画面幅に応じて横スクロールバーを自動的に表示・非表示にすることが可能です。
ユーザーが快適にページを見られるように、ぜひ活用してみてください。
