配置プロパティは、要素がページ上に配置される方法と他の要素との関係で構成されます。

様々な配置プロパティの使い方を知っていれば、あらゆる種類のレイアウトを作成できます。

STUDIOでは3つの配置プロパティがあります。

  • 相対
  • 固定
  • 絶対位置

そしてZ-indexです。

ここでは、それぞれの配置プロパティをいくつかの例を挙げながら使い方を説明します。また、Z-indexについてもいつ、どうやって使用するのか説明をしたいと思います。

配置設定のドロップダウン

配置設定は、要素を選択した後に表示される「ボックス」タブのトップバーの左にあります。

固定は第1レイヤーの要素のみ表示されます。絶対位置は固定が表示されていないときだけ表示されます。

相対配置

相対配置は、STUDIOでは標準の配置です。要素は親要素に対して相対的に配置され、重なることなく水平方向、または垂直方向に積み重ねられるため、相対と呼びます。

ほとんどの場合、相対配置は要素を正確に整列することを可能にし、異なった画面サイズでもバランスを保つことができるため、使用するのに最も理想的な配置プロパティです。

相対配置で要素を動かす方法をもっと知りたい方は、こちらをご確認ください。

固定配置

固定配置は、ビューポート(画面)を基準にした配置に要素を「ピン止め」している状態です。

ページを下にスクロールすると、要素は常に表示されたままになります。さらに、ページ上の他の要素に押し出されません。他の要素は、固定要素によって隠れます。

ヘッダーメニューによく使われます。

固定配置に設定する

要素を固定にするには、要素を選択し「固定」を配置設定のドロップダウンから選択します。

要素が固定されると、その下にある要素を覆います。もし、隠れた部分を非表示のままにしたくない場合は、マージンもしくはパディングを追加して調整します。

注意:固定配置は、ページの第1レイヤーのみ適用できます。

第1レイヤーはBaseの下のレイヤーです。

第1レイヤーかどうか確認するには、画面右側にあるレイヤーバーを見てください。

絶対位置配置

絶対位置配置を使用すると、他の要素の配置に影響を与えることなく、ページの任意の場所に配置することができます。 要素を重ね合わせることも可能です。

絶対位置配置は、その要素の親要素の位置に対して定義されます。

絶対位置配置に設定する

要素を選択し、配置設定のドロップダウンから「絶対位置」を選択します。すると、要素の線の色が赤になります。ページ上の好きな場所に要素をドラッグして配置します。

親要素の境界に対する要素の位置は、トップバーの「位置」の下に表示されます。トップバーで特定の値に設定することも可能です。

注意:絶対位置の要素は、親要素内に配置されている場合のみ表示されます。要素がはみ出すと、隠れている領域を示す赤い輪郭線が表示されます。

Z-index:重ね順

Z-indexは重なっている要素の重なり順です。

Z-indexを使用すると、グリッドをあえて崩したデザインなどあらゆるスタイルのレイアウトを作成することができます。

通常、要素を重ね合わせるときに絶対位置配置でよく使用されます。しかし、以下の例のような「立体感のある」効果は、相対配置とシャドウを使用することで表現することができます。

Z-indexを設定する

  1. 要素を選択する
  2. ボックスタブの左にあるZ-index設定のドロップダウンをクリックして、数値を選択します。

Z-indexの値

2つの要素にZ-indexの値を設定すると、最小値を設定した要素が下になり、最大値を設定した要素が上に表示されます。

自動でZ-indexの値を設定する

Z-indexが設定されてない場合、要素はレイヤーパネルの1番下の要素から順番に重ねられます。(通常、この順序は要素が追加された順に対応します)

例えば、下記の図では赤い四角がレイヤーパネルの1番下にあるため、1番上に表示されています。そして、たとえ全ての要素のZ-indexの値が0だったとしても、オレンジが2番目、黄色が3番目です。

この重ね順を変更するには、Z-indexの数値を変更するか、レイヤーパネルを操作します。

Did this answer your question?