【初心者向け】STUDIOでのボックスを使ったレイアウトの基本

2023年8月4日

当ページのリンクには広告が含まれています。

URLをコピーしました！

生徒

STUDIOでのレイアウトの作り方を知りたいです。

先生

STUDIOのボックスの操作や設定を説明します。

STUDIOでのWEBページ作成は、ボックスを並べてレイアウトを作成していきます。ここではボックスの操作や設定に付いて説明します。

ボックスはHTMLのdivタグの要素と同じような感じです。

この記事で分かること

STUDIOのボックスの操作方法
STUDIOのボックスで設定できること

ボックスの作成と移動

ボックスの作成

画面左側のツールボックスの2番目にあるボックスアイコンをクリックすると作成されます。

ボックスアイコンからドラッグして、配置する位置を指定しながら作成することもできます。

ボックスの移動

ボックスはドラッグで移動することができて、他のボックスの中に移動して入れ子にすることもできます。

大きさが近いボックスだとドラッグでうまく中に入れられないことがありますが、その場合は一旦どちらかのボックスの大きさを変えてみてください。

ボックスを編集する

ボックスの大きさや余白などの編集は、以下の2つの操作で行えます。

マウスでボックスの枠線などを直接ドラッグする
ボックスを選択してプロパティのに値を編集する

プロパティ欄の値を編集する方法は、下のボックスのプロパティを編集するで説明しています。

サイズを変更する

ボックスを選択して枠線上にマウスを持っていくと、カーソルが青の両矢印に変わりサイズの数値が表示されます。

カーソルが青の両矢印の状態でクリックすると、サイズの数値を編集できるようになります。

カーソルが青の両矢印の時にドラッグするとサイズ変更操作になります。

マージンの編集

ボックスの枠線の中央部分の外側にマウスを持っていくと、カーソルがオレンジ色の両矢印になります。

サイズの変更と同様に、この状態でドラッグするとマージンを変更できます。

ボックスの外側に表示されているオレンジの線の辺りにマウスを持っていきます。

カーソルがオレンジ色の両矢印の状態でクリックすると、マージンの数値を編集できます。

パディング

パディングを設定するには、ボックスを選択後にマウスカーソルをボックスの枠線の中点の内側に移動します。

マウスカーソルが緑の両矢印になった状態でドラッグして移動します。

マウスカーソルが緑の両矢印の状態でクリックするとパディングの値を直接編集できます。

角丸の大きさを編集

ボックスを角丸にして角丸の大きさを設定するには、各角の内側の丸をドラッグして移動します。

全ての角丸を編集する場合

左上の角の内側にある丸にマウスカーソルを合わせると青の両矢印になります。

そのままドラッグすると全ての角丸の大きさが変わります。

個別の角丸を編集する場合

プロパティに各角の値を入力します。

ボックスの属性を設定する

ボックスを選択すると右上角の外側に表示される白いボタンをクリックするとボックスの属性が表示されます。

また、画面左端の中央にあるアイコンからも属性設定パネルを表示できます。

ボックスの属性設定パネルは以下の項目を設定できます。

ID

ボックスにページ内で一意となるIDを割り当てます。IDを割り当てることで、リンク先に指定したりできるようになります。

リンク

ボックスのリンク先を設定します。

STUDIO内のページへのリンク

「ページ」を選択して、リストに表示されるプロジェクト内のページやモーダル、IDなどからリンク先を選択します。

リンク先を別タブで開くように設定することはできません。

外部URLへのリンク

「URL」を選択して、外部サイトのURLを入力します。

プロパティの $URLは、自身のページへのリンクを外部サイトにパラメータとして渡す際に使用します。 $URLを設定しておくと、自身のページのURLが変わってもリンク先の修正が不要になります、

ボックス内の要素の並び方を設定

子要素の配置や並び方を設定するには、親ボックスを選択すると表示されるアイコンメニューで設定します。

子要素が1個も無いボックスを選択してもアイコンメニューは表示されません。

子要素を持つボックスを選択すると、レイアウトを選択するアイコンが表示されます。

レイアウトを選択するアイコンのリストが表示されて、右寄せや上寄せなどを選択できます。

右端や下端の矢印をクリックすると、両端寄せや均等寄せのメニューも表示されます。

ボックスの並ぶ方向と折り返しを設定

親のボックスを選択すると並び方向を設定するアイコンが表示されます。

選択メニューが表示されるので、要素を並べる向きあるいは折返しを選択します。

折返しを選択した場合、要素の向きは右向きしか設定できないようです。

ボックスのプロパティを入力する

ボックスを選択した状態で画面上部に表示されるプロパティの値を設定できます。

番号	項目	説明
①	マージン	ボックスのマージン(外側の余白)の値を設定
②	パディング	ボックスのパディング(内側の余白)の値を設定
③	横幅	ボックスの水平方向の大きさを設定
④	縦幅	ボックスの垂直方向の大きさを設定します。
⑤	角丸	角丸の大きさを設定
⑥	透明度	透明度を設定
⑦	塗り	背景色を設定
⑧	枠線	枠線の色を設定
⑨	シャドウ	影の表示を設定

マージン

画面上部の「マージン」をクリックすると入力欄が表示されて、上下左右のマージンを入力することができます。

中央の錠マークをクリックすると、上下左右同一や左右同一の縛りを付けることができます。

パディング

パディングの値を入力します。

横幅

ボックスの水平方向のサイズを設定します。

単位	説明
px	サイズは入力されたピクセルの値固定です。
%	サイズは親要素からの割合です。
auto	サイズはボックス内の子要素のサイズに合わせて自動で調整されます。
flex	サイズは同じ階層の他の要素との比率で指定します。

px

サイズは入力されたpx（ピクセル）の値になります。

%

サイズは親要素の水平方向のサイズに対する割合で決まります。

auto

サイズはボックス内の子要素のサイズに合わせて自動で調整されます。子要素が無い場合は選択できません。

ボックスの枠線をダブルクリックすると、autoが設定されます。

flex

同じ並びの他の要素との比率で決まります。（同じ並びに他に要素が無い時は指定できません。）

例えば、2flexと1flexのボックスを並べた時は以下のようになります。

同じ並びにサイズ指定された要素がある場合、残りのサイズをflexが指定された要素で分け合います。

縦幅

ボックスの垂直方向のサイズを設定します。


px	サイズは入力されたピクセルの値固定です。
%	サイズは親要素からの割合です。
auto	サイズは適当に決められます。
flex	サイズはボックス内の子要素のサイズに合わせて自動で調整されます。
vh	画面に対する比率で設定します。

vh以外は横幅と同様です。