【bubble】レスポンシブデザインを理解しよう！①Fixed widthとCurrent minimum widthについて

NoCoderのつかさです。

今回はbubbleにおけるレスポンシブデザインのやり方について学習していきたいと思います。

レスポンシブデザインとは

レスポンシブデザインとは端末によって画面サイズが異なる場合でも、レイアウトを崩すことなく、きれいにWebサイトを表示させる方法です。スマホが普及した現代においては、Webサービスを作る上では必須の概念といえるでしょう。

bubbleにおけるレスポンシブデザイン

まずbubbleにおけるレスポンシブデザインをどのように行うかというと、ワークスペースの左上にResponsiveタブがあるので、そこをクリックするとレスポンシブデザインを編集できるようになります。

要素の幅をコントロールする

まずレスポンシブデザインで肝となるのが、要素の幅をコントロールすることです。デフォルトではFixed widthにチェックがはいっています。Fixed widthにチェックが入ったままの場合、画面サイズを変更しても要素はデフォルトサイズから変わりません。

■Fixed widthにチェックが入ってる時の挙動

画面幅を狭めると要素のレイアウトが崩れてしまいます。画面幅を狭めた時のレイアウトもきれいにしたい場合、Fixed widthのチェックを外してみましょう。

■Fixed widthのチェックを外す

要素間のバランスは崩れませんが、スマホサイズにした時、要素の幅が狭くなってしまいます。これはCurrent minimum widthの設定がデフォルトで20％になっていたからです。Current minimum widthを大きくしてみましょう。

■Fixed widthのチェックを外して、Current minimum widthを設定する

Current minimum widthでは画面サイズを小さくした時に、要素の最低限必要な幅を設定することができます。Current minimum widthはUI Builderで設定したWidthに対する％で設定します。今回はそれぞれの要素を60%に設定してみました。

要素が60%以下にならないので、スマホサイズにしても割といい感じのレイアウトになっています。