【Studio初心者ガイド】相対位置・固定位置・絶対位置について知る ｜Editor 5.0対応

• Studioのデフォルト3つの位置設定
• 相対位置について
• 固定位置について
• 固定位置の設定方法
• 固定位置の活用法（ボタン・チャットなど）
• 絶対位置について
• 絶対位置の設定方法
• 絶対位置の活用法
• まとめ

固定が選べない場合は、レイヤーパネルで固定したい要素が「Base直下」にあるか確認し、直下にない場合はレイヤーをドラッグ&ドロップして要素を移動します。

固定位置の設定方法

1.定位置に設定したいボックスを選択します。

2.ベースボックス（Base）直下に配置されたボックスであることを確認します。

3.右パネルの[位置]（赤四角）から[固定]を選びます。

固定する位置は、要素をドラッグして移動するか、画面最寄りの辺からの距離を、右パネルの[距離]（赤四角）に数値を入力して調整します。

固定位置に設定した要素は、相対位置の要素と違い、大きさや形を変更しても、他の要素に影響しません。

固定位置の活用法（ボタン・チャットなど）

HP上で、問い合わせチャットなどのボタンが固定されているのをご覧になった事があるかと思います。ここでは、その作り方をご説明していきます。

1.まず、キャンバスの最下部にボックスを追加して、右パネルの[幅]と[高さ]（赤四角）でサイズを縦50×横50pxに変更します。

2.右パネルの[角丸]（赤四角）を50％に変更します。

3.右パネル[背景色]（赤四角）で色を黒に変更します。

4.右パネル[位置]（赤四角）で固定位置に設定します。

このとき、固定位置ボタンが出現しない場合は、レイヤーを確認して、ピンク四角のように、固定位置のボタンにしたい要素が親要素の中にいないこと（独立しているか）を確認してください。

固定位置にする為には、一番上の階層（赤四角）に居る必要があります。

5.そして次に場所を設定しますが、今回は右下に設定していきます。要素をドラッグ＆ドロップして右下へ移動させます。

6.左パネルの[追加]の、「アイコン」（赤四角）の中からアイコンを選び、ドラッグ＆ドロップしてボタンの上に設定します。

設定したエディタ上のアイコンをダブルクリックすれば、デザインを変えることができます。

右パネル[カラー]と[サイズ]（赤四角）で、サイズを55、色を白に変更します（サイズ、アイコン、色は好きなもので大丈夫です）。

今回はページのTOPに移動するボタンをつくりたいと思いますので、上向き矢印アイコンにします。

7.TOPにあるボックスを選択し、右パネル[ID]を「top」（ローマ字なら何でも大丈夫です）と指定します。

ボックスにIDを設定することで、そのボックスをアンカーリンクの移動先として指定できます。

8.先ほど作ったボタンをクリックし、右パネル[設定]のリンク（赤四角）で、「#top」（先ほど指定したID）を選択します。これでTOPへ移動するボタンが完成します。

絶対位置について

絶対位置（Absolute）は、入れ子構造の親子ボックスにおいて、最も近い親ボックスを基準に子ボックスの位置を固定する設定です。

ラベルやアイコンなど、親ボックス内で要素を重ねて表示したい場合に利用できます。

親子ボックスは、ボックスの入れ子構造（親の中に子を入れる）でレイアウトを作成する考え方です。

絶対位置の設定方法

絶対位置に設定したい要素を選択し、右パネルの［位置］から［絶対位置］を選びます。

絶対位置の活用法

絶対位置は、商品の新着情報のアイコンなどに利用すると大変便利です。

図1様に、スクリーンの幅を変えて要素の位置が変わっても、図2の様にアイコンが固定されている事がわかります。

図1

図2

まとめ

本記事では、Studioでの配置方法である相対位置・固定位置・絶対位置の違いとその使い分けについて解説しました。

相対位置は他の要素との関係で位置が変わり、レイアウトが自動調整される基本的な配置です。

固定位置は画面全体を基準に要素を固定し、スクロールしてもその位置が変わらないため、ヘッダーやサイドバーに適しています。

絶対位置は親ボックスを基準に子要素を配置し、複雑なレイアウトを作成する際に活用されます。

これらの配置方法を理解し、適切に使い分けることで、より洗練されたデザインを実現できます。