Studioの重ね順とは？画像を重ねる方法について解説！

ホームページ制作をしていく中で、必ず困るのが「重ね順（Z-index）」という概念です。重ね順を理解していないと、画像が埋もれてしまうケースが多発します。

そこで今回は、Studioにおける重ね順の考え方について解説していきます。

記事の後半では重ね順の概念をつかって、画像を重ねる方法について紹介します。完成イメージは下記のとおりです。

重ね順（Z-index）とは

重ね順とは、「どれが上にくるか」を決める数字のことです。

例えば2つのボックスがあって、ボックスAの重ね順は-1、ボックスBの重ね順は3だとしたら、ボックスBの方が上にくるということです。

Studioの重ね順について

Studioの重ね順は、ボックスを選択した状態で上部メニューで設定することができます。

ちなみに重ね順は9段階あり、−3から5まであります。

例えば、ボックスを最下層にしたいなら「重ね順：-3」を選択して、最上層にしたいなら「重ね順：5」を設定すればOKです。

Studioで画像を重ねる方法

次は、「重ね順」の概念をよく使う実践に入っていきます。

完成イメージは、下記のとおりです。

実際の画像を使いながら、具体的に説明していきます。

①：画像を2枚用意します

左パネルにある「追加」のボタンをクリックします。

「Image」のボックスを選択して、画像を選択します。

②：マイナスマージンで要素を重ねる

画像を重ねる時にキーワードになるのが「マイナスマージン」です。

マイナスマージンは簡単にいうと、余白をなくして要素を引き寄せるテクニックのことを指します。

つまり、「マージン：20px」のような普通のマージンは余白が広がりますが、「マージン：-20px」のようなマイナスマージンは余白がなくなり要素がくっつくようになります。

ではマイナスマージンを実装していきます。

ライオンの画像を選択しながら、マージンを下記のように設定します。(上方向に60px、左方向に-60pxのマージンを当てています）

すると、下記のように画像が重なったはずです。

そしてどちらの画像を上下にするかによって、重ね順を変えます。

例えば、トラの画像を上に重ねたいなら、トラの重ね順を1以上に設定します。

逆に、ホッキョクグマを上に重ねたいなら、ホッキョクグマの重ね順を1以上に設定します。

Studioのサイト制作なら「Terace」にお任せ！

今回は、Studioの重ね順・画像を重ねる方法について解説してきました。

Studioはノーコードツールとはいえ、完全初心者が扱うにはハードルの高いツールです。「自作は難しいかな、、、」と感じた方は、サイト制作を外注することも検討してみましょう！