このチュートリアルでは、要素の配置の基本から、あらゆるレイアウトの作成までを説明します。

1つの要素を移動する

キャンバスに最初の要素を追加すると、ドラッグをして9つの基本位置に配置できます(各境界線の左右、中央、ページ中央)。

要素を別の要素の中に配置する(入れ子)

要素を別の要素の中に配置することができます(要素を格納する十分なスペースがある限り)。

内側の要素は子ボックスと呼ばれます。コンテナ要素は親ボックスと呼ばれます。

親ボックスを基準にして、子ボックスを上記と同じ9つの位置に配置できます。

右サイドのレイヤーパネルから要素の階層を確認することができます。

子ボックスは親ボックスの下に入れ子になっています。

「Base」は最上位のレイヤーです。

2つの要素

キャンバスにすでに配置された要素の外側に2つ目の要素を追加すると、新しい要素はすでに配置された要素を基準に4つの位置にドラッグをして配置することができます(上下左右)。

これらの2つの要素は、同じレイヤーにあり、同じ親ボックス内にあるため、兄弟ボックスと呼ばれます。

もう一度、レイヤーパネルから要素の階層を確認します。

方向と順序

STUDIOのデフォルトでは、方向は上から下になっています。

方向や順序を変更するには、列の中の要素を1つ選択します。

次に、親ボックスの端に表示される矢印の上にマウスを移動し、列の方向を変更します。

ラッピング

ジグザグの矢印は、折り返しのプロパティを表しています。 親ボックスに十分なスペースがない場合、要素を折り返すことによって自動的に複数行に分割されます。

注意:折り返しを使用する場合、要素の横幅と縦幅は%ではなく、ピクセルで設定する必要があります。そうでなければ、要素は親ボックスと一緒に縮小されます。

整列と両端揃え

整列

整列は、要素が上、中央、または下(方向が垂直の場合)または左、中央、右(方向が水平の場合)に均等に分布する方法を指します。

要素の整列を変更するには、要素を選択し、要素の上部、左部に表示される青いシンボルで切り替えます。

両端揃え

両端揃えとは、要素がその主軸上で等間隔に配置される方法を指します(方向が水平の場合は水平、方向が垂直の場合は垂直)。

要素の整列を変更するには、要素を選択し、要素の上部、左部に表示される青いシンボルで切り替えます。

以下は、水平方向と垂直方向の整列と両端揃えの比較です。

グループ化:2つの方向

全てのボックスを同じ行、同じ方向に配置したくないときはどうしますか?

それは単に、ボックスを他のボックスの横にドラッグ&ドロップするだけで実現します。

ドラッグ&ドロップすると、右サイドのレイヤーパネルからわかるように、2つの要素が新しいコンテナ(または親)ボックスに自動的にグループ化されます。

ボックスモデルと親要素と子要素の関係性を知りたい場合は、こちらをご確認ください。

グループ化:2つの整列

要素を整列すると、要素を均等に配置することしかできないことに気付くでしょう。 例えば、左側に2つ、右側に1つ配置することはできません。

そのためには、コンテナボックスをもう一度作成し、異なって整列したい要素をグループ化する必要があります。 複数の要素を選択(SHIFT + 選択)してからCommand + G(またはCtrl + G)を押すと、すばやくグループ化できます。

最後に、要素間に余白を持たせるためにマージンとパディングが使用されます。マージンとパディングについては、こちらをご確認ください。

Did this answer your question?