ノーコード bubble 解説_レスポンシブデザイン

スマホで見る、パソコンで見る、タブレットで見る。どんなデバイスで見ても綺麗な表示にするためのレスポンシブデザイン。レイアウトが崩れてしまった時の修正方法です。

 

今後も色々なパターンを追加していきます。

 

BabbleのResponsiveタブをクリックすると４種類のデバイス設定があります。スマホ（縦）、スマホ（横）、タブレット、パソコン。クリックするとその大きさの横幅になります。（手動ならもっと細かく刻めます）

 

 

1: 中央にしたロゴがずれる

ヘッダーを作りながら説明します◎

Bubble 真っさらな状態から始めるとindexページの横幅は1080pxです。（高さは今回適当で）

 

その中にGroupで1080×80pxのヘッダーを作ります。配置は一番上にぴったり付けますのでX:０、Y:０です。

 

Image で中央にロゴ（65×65）を配置します。

 

右側にButton でボタン（130×40）を配置します。使う要素は以上です。

 

これをResponsive のスマホサイズで見てみると、

桜マークが右に寄ってボタンが下に落ちて、、ヘッダーの幅が太くなってしまったよ

これらを修正します。まずは桜マークから

 

1080×70のGroupで 桜マーク（Image A)とボタン（Button ボタン）を囲います。高さは桜マークの60より高くてヘッダーの80より低ければOKです。横幅はヘッダーと同じ1080です。

 

Elements tree はこんな構造になっています。今作ったのはGroup B です。ただの枠なので色も何も見えません。

 

Responsive タブで見ます。

桜マークを横いっぱいのGroup Bで囲った事で中央に固定されました。ボタンもカラム落ちせずにヘッダーの高さも80のままです。

ただ実際の表示で見てみると、

ボタンがクリックできません。

 

原因は後から作ったGroup B が前にあるためその後ろにあるボタンは押せないのです。これを修正するにはElements tree のButton ボタンを選択してその上で右クリックしてBring to front で前に持ってきます。

 

実際の表示を見てクリック出来れば成功です。（ホバー効果で色の変化も確認できました）

 

デザイン的に桜マークとボタンの間がきつい場合は、、Responsive でボタンのFixed width のチェックを外します。（これもスマホ縦でチェックしています）

 

外すとぎゅっと短くなって「ン」が落ちたのでCurrent minimum width のバーを伸ばしたり縮めたりいい具合に調整します。

 

 

 

2: グループにしてカラム落ちを防ぐ

ボタン２つ「新規登録」「ログイン」とハンバーガメニュー（３本線）を右端に一列に表示したいとします。

（サイトのロゴは左端に表示）ボタン２つをグループにしてハンバーガーメニューに何もしない時はResponsive スマホ設定でハンバーガーメニューがカラム落ちしました。

 

ボタン２つもバラバラにしたらボタン１つとハンバーガーメニューがカラム落ちしました。

 

ボタン２つとハンバーガメニューを右端に一列に表示するには

Shift を押しながらボタン２つを選択＞右クリック＞Group elements〜で２つをグループにします。更にハンバーガーメニューにかかるまでグループの枠を伸ばします。

 

Responsive のスマホサイズでチェックします。３つ揃って下に落ちていますが Fixed margin の右寄せを選ぶと綺麗に一列になりました◎