プログラミング言語を使ったコーディングをせずにアプリを作れるノーコードツール。
その中でもやや上級者向けのツールがBubbleです。
BubbleでPC用のレスポンシブ対応ヘッダーを作る方法をご紹介します!
下図は768pxでは表示され、320pxでは非表示になるヘッダーメニューの完成例です。


作り方
早速作り方をご紹介していきます!
「Header Menu」など分かりやすい名前で新規にページを作成します。
ページ全体のレイアウトを設定します。Layoutタブの各設定を変更しましょう。

- Container layout
-
メニューリンクを横並びにするため、Rowを選択します。
- Min width
-
幅の最小値を設定します。
現状、スマートフォンの小さめ機種でも幅は320pxほどのようです。 - Min height
-
メニューの高さを設定します。
好みや表示内容によりますが、通常は80~120ほどに設定します。

多くのアプリと同様に、メニューの左端にアプリ名を表示します。
textエレメントを配置し、文字の色や大きさを調整しましょう。
UIビルダーのVisual elementsにあるLinkエレメントを配置します。
初めに1つリンクを作ったら、先に文字の色やサイズを設定しましょう。
その後、作成したメニューをコピペすると作成時間を短縮することができます!

また、忘れずにDestination Pageにリンク先ページを設定しましょう。
各リンクをGroupにまとめる方が管理しやすい場合もあります。
メニューアイテムの数やアイテム間の隙間などにより、Groupも活用してください。
パディングやエレメントの大きさなど、レイアウトを最終調整して、一旦メニューは完成です。
少なくともPC(900px以上)ではレイアウト崩れが無い状態にしましょう。
通常、PCにはヘッダーメニュー、スマホにはハンバーガーメニューを表示します。(タブレットでどちらを表示するかは好み)
そのため、端末サイズによってヘッダーメニューの表示・非表示を切り替えます。
Conditionalタブから以下の手順で設定します。
- 1.境界値確認
-
幅を変えつつ、何pxまで表示が問題ないかを確認しましょう。
画面左、UIビルダーの隣にあるResponsiveタブを選択します。
グレーと白の境界の部分にカーソルを合わせると矢印が出現するので、それをドラッグして動かすと幅が変わります。
レイアウト崩れが起きる大きさを確認しましょう。境界値確認方法 - 2.メニュー表示設定
-
メニュー全体、またはGroupのConditionalタブを設定します。
まずはWhenに「Current page width」「≧」「境界値」を設定。
次にSelect a property to change when trueをクリックし、「This element is visible」を選択。
「This element is visible」にチェックをつける。 - 3.非表示設定
-
同様に非表示も設定します。
まずはDefine another conditionボタンをクリックして条件を追加。
次にWhenに「Current page width」「<」「境界値」を設定。
Select a property to change when trueをクリックし、「This element is visible」を選択。
チェックはつけない。 - ハンバーガーメニュー作成
-
ここでは省略しますが、必要に応じてスマホようにハンバーガーメニューを作成してください。
ハンバーガーメニューは、境界値の条件がPCとは逆になります。(境界値以下の場合に表示)
完成
ここまで対応していれば、一定の幅まではメニューが表示され、それ以下の幅になると非表示になるはずです。
デバッグして確認してみましょう!


コメント