STUDIOのボックス設定とグループ化【ノーコードツールでサイト製作】

ノーコードツールのSTUDIOを知っていますか?

ノーコード開発ツールには、業務システム開発に優れたbubble。モバイルアプリの開発に優れたAdaloやGlideなどが有名です。

アプリ開発だけではなく、ノーコードでWebサイト構築ができるSTUDIOがあります。

ここでは Webサイト構築ツール「STUDIOのボックス設定」を紹介していきたいと思います。

STUDIOとは?

STUDIO

STUDIOは、ノーコードでウェブサイトの構築ができるツールです。

STUDIOは、デザインを重視したノーコードツールになっています 。

プログラムコードを書かずに綺麗でかっこいいウェブサイトを作ることが可能。

注目度の上がっているノーコードでサイト作成が出来るツールです。

STUDIO登録の詳細はこちらの記事
⇒ STUDIOの登録方法

ここでは、STUDIOのボックス設定をどうすればいいのか、基本となる使い方を解説します。

STUDIOでサイト作成

STUDIOは、ノーコードでサイトの構築ができるツールです。

通常、コードを入力してWebサイトを作成していきますが、STUDIOはノーコードでサイト作成が行えるツール。

ノーコードのためSTUDIOのレイアウトや入力方法は既存のWebサイト作成ツールとは異なります。

一番大きな違いは、ボックスレイアウトを採用していることです。

STUDIOはアプリケーション制作時に使われている、ボックスレイアウトが使われています。

そのため、他のツールを使用していた方には、使い方が分からないと感じることもあります。

ボックスレイアウトとは

ボックスレイアウトは、積み木構造になっていて要素を積み上げていきます。

レイアウトは、ボックス(四角形)の組み合わせが基本。

ブロック要素でコンテンツのグループを作り、各ブロックの配置を指定します。

この操作をマウス操作で行えるため、コードの入力は必要ありません。

ボックスレイアウトでレイアウトを行うと、親の要素を頂点とした階層構造になります。

親要素の中に子要素を追加してレイアウトを作成していくので、この感覚に慣れる必要があります。

他には、ボックスを並べたり、中に入れてレイアウトをすることが可能。(ボックス同士を親子関係にする)


また、STUDIOは、グループを使用しています。

STUDIOでは、複数の要素をまとめて親ボックスを追加することを「グループ化」と呼びます。

STUDIOには、ボックスとグループという概念があります。

(親ボックスは、<div> <group>という名前になります)

ボックスを追加

右クリックしてメニューのグループ化をクリックすると、グループ化できます。

右側のレイヤーでは階層の確認が行えます。

グループ化やレイヤーの階層は、慣れないと理解しにくいかもしれません。

要素の位置と並べ方

ボックスレイアウトの要素の並び方を、マウス操作で変更可能。

並び方は、親要素で変えることができます。

方向は、画面の矢印のカーソルで変えれます。

横、縦、左、右、(→・↓・←・↑)で方向を指定できます。

位置の変更は、表示されるマークで変えれます。

左寄せにしたり、中央寄せ、左右に離したりということが、マウス操作で行えます。

調整自体は簡単ですが、慣れないと、動かす部分を指定するのが難しいです。

初めてだと分かりにくいので、色々触ってみて、ボックスの要素の確認方法に慣れるといいです。

ボックスの余白の調整方法

要素の場所(余白)を調整するには2つの方法があります。

  • マージン(外側の余白)
  • パディング(内側の余白)

STUDIOでは、マージンとパディングを使用して余白を調整していきます。

細かい調整をするときは余白を使用するといいです。

  • マージンはオレンジ色
  • パディングは緑色

マージンやパディングの数値を入力したり、隅にカーソルをあわせて、矢印でサイズを変えることができます。

このようにマージンやパディングで余白を変えることが可能です。

ボックス内にボックスを入れる方法

ボックスの中に子ボックス入れたり、並べたりすることができます。

親のボックスにボックスや画像をドラッグ&ドロップで入れることができます。

左側のサイドのボックスや画像をドラッグ&ドロップします。

どのように重なっているのかは、左側のレイヤーで確認できます。

レイヤーを開いて、ボックスやグループの構造を確認するといいです。


今回は、STUDIOのボックス設定を紹介しました。

初めてノーコードツールSTUDOを使用した時に、難しかった部分がボックスとグループでした。

ワードプレスに慣れている方は、STUDIOを使用すると手こずる部分になるかもしれません。


STUDIOのその他の記事はこちら
⇒ STUDIOのエディタ画面の使い方
⇒ STUDIOのテキスト設定方法
⇒ STUDIOで出来ることと出来ないこと

スポンサードリンク



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です