ノーコードツール「Adalo」：Rectangleを使ってスクリーンレイアウトを整える方法
はじめに
このページではノーコードツール「Adalo」のTipsを紹介しています。
スクリーンをレイアウトする時に、複数のコンポーネントを選択すると、画面左側のメニューで以下の整列を選ぶことができます。
- Align Left（左揃え）
- Align Horizontal Centers（左右方向中央揃え）
- Align Right（右揃え）
- Align Top（上揃え）
- Align Vertical Centers（上下方向中央揃え）
- Align Bottom（下揃え）
しかし、選択した全てのコンポーネントが揃ってしまうため、細かいレイアウトは手動で行う必要があります。
Rectangle（長方形） を使ってレイアウトを整えると、きれいにレイアウトを揃えることができます。
↑↑↑不揃いのコンポーネント間の間隔が↑↑↑
↑↑↑きれいに等間隔に揃います↑↑↑
Rectangle を使ったレイアウトの方法を解説していきます。
①Rectangleを用意する
必要なコンポーネントを置いたら、Rectangleコンポーネントも同じように用意します。
Rectangleは 画面左側のメニュー上部 から選んでページに置きます。
ページの幅いっぱいに広げたら 高さを指定 していきます。
高さはRectangleを選択して 画面右側のメニューにある「EDIT STYLES」 をクリックします。
するとコンポーネントのスタイルを設定する項目が表示されるので Height（高さ） を設定します。Widthは幅で、Heightは高さです。
設定 ： Height = 100
数値の変更は、キーボードで直接変更するか、項目にマウスを合わせると項目の右側に上下の三角が表示されるので、上向きの三角で増やす、下向きの三角で減らすことでも指定できます。
②レイアウトを整える
置いたRectangleをコピー＆ペーストして、それぞれのコンポーネントの隙間を整えます。
今回は、テキストと日付、画像のそれぞれのコンポーネントとタイトルのテキストを1組にして、その間に 同じ高さのRectangleを置いて等間隔にレイアウト します。
一番下のボタンも同じように、Rectangleを置いて整えます。
③Rectangleを非表示にする
レイアウトが整ったら Rectangleを非表示 にします。
Rectangleを消してしまっても構いませんが、次に項目を追加したりレイアウトを変える場合に、またRectangleを置くのが手間に思う場合は、Rectangleの Opacity（不透明度）を0 にして見えなくすることもできます。
設定 ： Opacity = 0
🎉完成！
全てのRectangleの不透明度を設定したら完成です。
それぞれの項目が等間隔にレイアウトされましたね。
まとめ
本記事では、ノーコードツール「Adalo」でRectangleを使ったスクリーンのレイアウト方法を解説しました。
ポイント
1. Rectangleを使って項目を等間隔にレイアウトする。
2. RectangleのOpacity（不透明度）を0にして非表示にする。
この方法を使えば、見た目がきれいに整理されたレイアウトを素早く作ることが可能です。
また、縦方向だけでなく横方向にも整理することもできるので、自由にきれいなレイアウトに利用できます。
ぜひ活用してみてください。
Discussion