ノーコードツール「Click」：シェイプを使ってページレイアウトを整える方法
はじめに
このページではノーコードツール「Click」のTipsを紹介しています。
ページをレイアウトする時に、左右方向は「左揃え」「中央揃え」「右揃え」を設定できますが、上下方向は手動で整列しないといけません。
シェイプを使ってレイアウトを整えると、きれいに等間隔で揃えることができます。
①シェイプを用意する
必要なエレメントを置いたら、シェイプエレメントも同じように用意します。
シェイプはキャンバス左側のエレメントメニューにある「ベーシック」から選んでページに置きます。
ページの横幅いっぱいに広げたら、縦幅を指定していきます。
縦幅はキャンバス右側のメニューにある「スタイル」の「サイズ」で指定します。
Wは横幅で、Hは縦幅です。
最初はHの横の鍵マークが掛かった状態になっていて変更できないので、鍵マークをクリックして解除してから、Hの数字を変更していきます。
数字の変更は、数字をキーボードで直接変更するか、数字の右側にマウスを合わせると上下の三角が表示されるので、上向きの三角で増やす、下向きの三角で減らすことでも指定できます。
②レイアウトを整える
置いたシェイプをコピー＆ペーストして、それぞれのエレメントの隙間を整えます。
今回は、テキストと日付、画像のそれぞれのエレメントとタイトルを1組にして、その間に同じ縦幅のシェイプを置いて等間隔になるようにします。
一番下のボタンも同じように、シェイプを置いて整えます。
③シェイプを非表示にする
レイアウトが整ったらシェイプを非表示にします。
シェイプを消してしまっても構いませんが、次に項目を追加したりレイアウトを変える場合に、またシェイプを置くのが手間に思う場合は、シェイプの「不透明度」を0にして見えなくすることもできます。
🎉完成！
全てのシェイプの不透明度を設定したら完成です。
上下方向のレイアウトだけではなく、左右方向のレイアウトを整えるのにも、もちろん使えます。
まとめ
本記事では、ノーコードツール「Click」でシェイプを使ってページレイアウトを整える方法を解説しました。
ポイント
- シェイプを使って項目の間隔を合わせる。
- シェイプの不透明度を0にして見えなくする。
この方法を使えば、XとYの座標を1つずつ指定する必要がなく、見た目にきれいなレイアウトを素早く作ることが可能です。
ぜひ活用してみてください。
Discussion