こんにちは!会社員クリエイターのこばたです!
STUDIOのボックス配置において、
- 固定位置と絶対位置の違いってなんだろう?
- すべて絶対位置ではだめなの?
- ボックスを固定位置にしたいのに、選択メニューに絶対位置しか出てこない…
上記のようなレイアウト設定におけるお悩みをお持ちの方へ、本記事ですべて解消します。
今回は、STUDIOにおける3つの配置設定の概念と使い方を解説していきます。概念を理解してボックス配置をスムーズに行えるようにしましょう。
相対位置(デフォルトの配置方法)
概念
いつも皆さんが使っているデフォルトの配置方法なので、いつも使っている方法だなと思っていただければ問題ないです。
相対位置は(デフォルト状態のボックスの位置)は、方向・配置ルールに従って、他のボックスとの関係により相対的に定義されます。
他のボックスのサイズの変更や位置の変更によって、自身も影響されて要素の幅や位置が変更されるような配置の設定です。
活用例

例えばテキストボックスを消した場合、相対的に下の画像の入っているボックスが上に上がるという配置方法です。

下の画像のようにレスポンシブ設定をした(画面幅を小さくした)時に自動でレイアウトを調整してくれるのも、相対配置の特徴です。そのため、レスポンシブ設定の作業を減らすためにも基本的に相対配置で要素を配置してくのがおすすめです。

固定位置
概念
ベースボックス(<div> Base)直下に配置したボックスは、配置を「固定」に変更できます。
固定位置のボックスは画面上に固定されます。つまり、スクロールに影響されず常に同じ位置に表示されます。
固定する位置は、スクリーンに一番近い辺からの距離で指定できます。
活用例
例えば、ヘッダーをスクロールしても常に上に表示したい時などに利用します。
また、Webサイトでよく見かける「スクロールに影響されず背景画像が表示される」実装も可能です。
絶対位置
概念
親ボックスを持つボックスで設定できます。固定位置は画面上に固定されるのに対して、絶対位置は各ボックスの中で位置を固定できます。
親ボックスの最も近い辺を基準として、ボックスが配置されるようになります。
活用例
例として下のような、画像の中にテキストが入っているボックスを用意しました。

この画像の右上に「SALE」というバッジを追加します。そうした時に相対位置のままだと下のように、新しく追加したボックスに応じて、テキストボックスが相対的に移動してしまいます。

画像の中の要素(テキスト)に影響を与えずに、画像の中に固定に配置したい時に絶対位置を設定します。

親ボックスに対してバッジは固定位置で設定されているため、レスポンシブ設定をしても親ボックスの最も近い辺に対して固定で表示されます。
Webサイトのクオリティを上げるための「あしらい」を付ける時によく活用する配置方法です。
まとめ
今回説明した3つの配置方法の概念と使い方は、STUDIOでページを作成しておく上で基礎になるので、完璧にマスターしておいてください。
初学者の方だと特に、自由に配置ができる絶対位置を多用してしまうケースがあるのですが、レスポンシブ設定のときに作業が増えて後悔することになるので、基本的には相対配置でページ作成をしていくことをおすすめします。
慣れてきたら場面に応じて配置方法を使い分けれるようにしておきましょう。
STUDIOでサイトの制作を依頼したい、STUDIOでWebサイト作りたいけど、何から始めていいか分からない…という方へ。
STUDIOにてサイトの制作依頼やメンター等の依頼も承っておりますので、ぜひお問い合わせよりご連絡ください!