ボックスの配置

Webサイトをデザインする上で、ボックスの配置はとても重要な要素です。Studioのエディタでは、ボックスの配置方法として以下の4つを提供しています。

これらを適切に組み合わせることで、表現の幅が広がり、洗練されたレイアウトを実現できます。

この記事では、相対・固定・絶対・追従それぞれの配置方法の違いと設定についてご紹介します。

相対位置（Relative）

Studioでは、ボックスの配置はデフォルトで相対位置に設定されています。

相対位置に設定されたボックスは、周りの要素との関係性を保ちながら配置が決まります。

スマートフォンやタブレットなど、画面サイズが変わっても方向・配置のルールに従って要素の配置が自動的に調整されるため、レスポンシブなデザインを簡単に実現できます。

ヘッダーを画面上部に固定したい場合や、装飾的な要素を親ボックス内で自由に配置したい場合など、特定の表現をする場合には、相対位置以外の配置方法を活用します。

ベースボックス（<div>Base）直下に配置したボックスを[固定]に設定すると、ボックスは画面上の特定の位置に固定され、スクロールに影響されず常に同じ位置に表示されます。

ヘッダーやサイドバーなど、常に画面上に表示させたいコンテンツがある場合に使用します。

入れ子になっている親子ボックス内で、親ボックスを基準に子ボックスの位置を固定表示させる場合に使用します。

新着アイコンなど、レスポンシブに影響されず、親ボックスに装飾を加えたい場合などに活用できます。

入れ子になっている親子ボックスの子ボックスを選択します。
エディタ左上の[配置]で[絶対]を選択します。
ボックスの表示位置を設定します。ボックスをドラッグして配置したい箇所に移動する、または、エディタ上部のスタイルメニューの [位置]に、最も近い親ボックスの四辺からの距離を数値（単位：px）で入力して指定します。

追従位置は、スクロールに応じてボックスの配置方法が切り替わる設定です。

追従位置に設定すると、スクロールの途中で指定した位置にボックスが固定され、親ボックスのスクロールが終了すると自動的に固定が解除されます。

表の上部や左部に見出し（テーブルヘッダー）を固定表示させる場合などに活用できます。

注意：

追従位置の設定状況は、エディタ上では確認することが出来ません。編集中の動作確認はプレビューURL上で行なってください。
追従位置は、親要素の[はみ出し]設定が[表示]と[スクロール]の場合に有効です。
- [はみ出し]：Webページ全体のスクロールに対して動作します。
- [スクロール]：親要素内のスクロールに対して動作します。
- [非表示]：追従位置の設定が無効となり動作しません。

追従位置に設定したいボックスを選択します。
エディタ左上の[配置]で[追従]を選択します。
追従指定をしたボックスが、スクロール時に固定表示に切り替わる位置を指定します。エディタ上部のスタイルメニューの [位置]に、親ボックス四辺からの距離を数値（単位：px）で入力して指定します。
この指定することで、要素がどの位置から固定表示に切り替わるかを制御できます。

下の画像では、追従に設定したボックスが親ボックスの上辺 48pxの位置から固定表示されるように指定されています。