【Studio】【初心者向け】パーツの配置、相対・絶対位置・固定・追従と重ね順について分かりやすく解説

カッパ子

パーツを思い通りの場所に置きたいんですけど…

ユウ

それなら、配置と重ね順を理解すれば大丈夫！

Studioでヘッダーをスクロールしても表示させたり、画像の上にバッジを重ねたりしようとして、上手くいかなかった経験は誰でもあると思います。

こうした配置周りの設定はコーディング・ノーコードともに少し分かりにくいので、初めは苦戦すると思いますが、出来るようになれば自由にパーツを置けるようになるので、デザインの幅が広がります。

本記事では、Studioの配置に関する設定について、CSSの考え方も交えながら解説します。

配置の基本は相対位置

まず押さえておきたいのが、Studioのデフォルトで設定されている相対位置。

文字で書くと難しそうに感じますが、要は特別なことが何もない基本の状態です。

並べ方のルールによりますが、上から下、左から右、といったように要素が順番に置かれていく感じです。

相対位置の利点は、画面幅が変わっても、要素が自動的に位置を調整してくれることです。

レイアウトが崩れにくいので、これといった理由がない場合は、基本的にこの相対位置のまま配置するのが良いです。

要素を自由に配置したい時は絶対位置や固定を使います。

絶対位置や固定というのは、方法が二種類存在するわけではなく、パーツによって呼び方や基準が変わっているだけです。

まず固定は画面そのものを基準にします。
画面の上から10px、左から20px、という具合にスクロールしても画面の同じ場所に留まり続けます。

一方絶対位置は親となるボックスを基準にします。
親に対する絶対位置なので、親の中の特定の位置に固定したいといった場合に使います。

表示が切り替わるのも簡単で、そのボックスが一番外側に置かれている場合、親がない場合は固定、何かのボックスの中に置かれた場合は絶対位置となります。

違いはありますが、どちらも通常の流れから外れて自由に配置したい時に使うということを覚えておけば問題ないでしょう。

相対位置と固定のちょうど中間のような性質を持っているのが追従です。

追従に設定した要素は、普段は通常の流れの中にいて、他の要素と一緒にスクロールで動いていきますが、スクロールしてある位置まで来ると、そこでピタッと画面に貼りついて一緒に動くようになります。

「粘着する」というイメージで、CSSでも「sticky」と指定します。

固定が最初から最後まで画面の同じ場所に居続けるのに対して、追従はあるところまでは一緒に動き、そこから貼りつきます。

この違いを理解しておくと、その要素をずっと画面上に表示させたいのか、途中から表示させたいのかという使いわけができるようになるので、一度実際に比較してみることをオススメします。

配置と切っても切れない関係の重ね順、CSSでいうz-indexに当たります。

要素を画面上に固定・追従させたり、絶対位置で自由に配置させると、要素同士が重なることが出てきます。

この時、どちらを手前に表示するのかを決めるのが重ね順です。

数字が大きいほど手前、小さいほど奥に表示されるので、固定したヘッダーが下のコンテンツに隠れてしまう、という場合はヘッダーの重ね順を大きくしてあげれば解決します。

初心者の方がつまづきやすいポイントが、重ね順は位置設定と組み合わさって初めて分かるということです。

相対位置は自然に配置されるので「要素が重なる」ことがなく、固定・絶対位置・追従といった配置にしてからでないと設定がしにくいです。

また、数字の大小で前後の順番が変わるのもややこしくて、ある要素を前に表示したくて重ね順を10や20に設定したとしても、他の要素が99で設定していると後ろに表示されてしまいます。

重ね順の数字を変えているのに前後が思ったように変わらないというときは、特定の要素だけでなく、他の要素の位置設定も確認してみると原因が見つかる場合が多いです。

まず大前提として、重ね順は変に大きくしすぎないこと。

「重ね順：9999」のように設定してしまうと、いくら重ね順を上げても倒せないラスボスみたいな存在になってしまうので、大体「-5 〜 +5」くらいの範囲で調整しておくと良いでしょう。

Studioでは重ね順は初期値0で設定されているので、他のパーツより後ろに配置したいなら-1、前に配置したいなら+1といった形で管理していくと楽になります。

その中でも固定ヘッダーなら+5、ただの装飾パーツなら+1といったように、用途ごとに数字の目安を決めておくと、後から重なりを調整するときも迷いにくくなるのでオススメです。

種類がいくつかあったり、パーツによって名前が変わったりと、最初はわかりにくい配置設定ですが、相対位置を起点に違いを考えていけば理解しやすいと思います。

特に、絶対位置はStudioで自由にデザインする上で欠かせないテクニックなので、ぜひ実際に触って使いこなせるように頑張ってみてください。