ボックスの配置
Webサイトをデザインする上で、ボックスの配置はとても重要な要素です。Studioのエディタでは、ボックスの配置方法として以下の4つを提供しています。
相対位置(Relative)
固定位置(Fixed)
絶対位置(Absolute)
追従位置(Sticky)
これらを適切に組み合わせることで、表現の幅が広がり、洗練されたレイアウトを実現できます。
この記事では、相対・固定・絶対・追従それぞれの配置方法の違いと設定についてご紹介します。
相対位置(Relative)
Studioでは、ボックスの配置はデフォルトで相対位置に設定されています。
相対位置に設定されたボックスは、周りの要素との関係性を保ちながら配置が決まります。
スマートフォンやタブレットなど、画面サイズが変わっても方向・配置のルールに従って要素の配置が自動的に調整されるため、レスポンシブなデザインを簡単に実現できます。
ヘッダーを画面上部に固定したい場合や、装飾的な要素を親ボックス内で自由に配置したい場合など、特定の表現をする場合には、相対位置以外の配置方法を活用します。
固定位置(Fixed)
ベースボックス(<div>Base)直下に配置したボックスを[固定]に設定すると、ボックスは画面上の特定の位置に固定され、スクロールに影響されず常に同じ位置に表示されます。
ヘッダーやサイドバーなど、常に画面上に表示させたいコンテンツがある場合に使用します。
ユースケース
固定ヘッダー
固定サイドバー
画面上に常に表示される「お問い合わせはこちら」ボタン
固定位置の設定
固定位置に設定したいボックスを選択します。
固定位置が使用出来るのは、ベースボックス(<div>Base)直下に配置したボックスのみです。
エディタ左上の[配置]で[固定]を選択します。
ボックスの表示位置を設定します。エディタ上部のスタイルメニューの [位置]に、最も近いスクリーンの四辺からの距離を数値(単位:px)で入力して指定します。
画面下部に固定させる場合には、ボックスをスクリーン下辺へドラッグして移動する、または、[位置]に実数を入力して調整します。
絶対位置(Absolute)
入れ子になっている親子ボックス内で、親ボックスを基準に子ボックスの位置を固定表示させる場合に使用します。
新着アイコンなど、レスポンシブに影響されず、親ボックスに装飾を加えたい場合などに活用できます。
ユースケース
写真や要素の上に文字を重ねて表示させる
「New!」「SALE」「人気」などのラベル付け
絶対位置の設定
入れ子になっている親子ボックスの子ボックスを選択します。
エディタ左上の[配置]で[絶対]を選択します。
ボックスの表示位置を設定します。ボックスをドラッグして配置したい箇所に移動する、または、エディタ上部のスタイルメニューの [位置]に、最も近い親ボックスの四辺からの距離を数値(単位:px)で入力して指定します。
追従位置(Sticky)
追従位置は、スクロールに応じてボックスの配置方法が切り替わる設定です。
追従位置に設定すると、スクロールの途中で指定した位置にボックスが固定され、親ボックスのスクロールが終了すると自動的に固定が解除されます。
表の上部や左部に見出し(テーブルヘッダー)を固定表示させる場合などに活用できます。
ユースケース
縦に長い料金プランセクションで料金とプラン名を上部に固定する
表の上部や左部に見出し(テーブルヘッダー)を固定する
ブログ記事にサイドナビゲーションを固定する
注意:
追従位置の設定状況は、エディタ上では確認することが出来ません。編集中の動作確認はプレビューURL上で行なってください。
追従位置は、親要素の[はみ出し]設定が[表示]と[スクロール]の場合に有効です。
[はみ出し]:Webページ全体のスクロールに対して動作します。
[スクロール]:親要素内のスクロールに対して動作します。
[非表示]:追従位置の設定が無効となり動作しません。
追従位置の設定
追従位置に設定したいボックスを選択します。
エディタ左上の[配置]で[追従]を選択します。
追従指定をしたボックスが、スクロール時に固定表示に切り替わる位置を指定します。エディタ上部のスタイルメニューの [位置]に、親ボックス四辺からの距離を数値(単位:px)で入力して指定します。
この指定することで、要素がどの位置から固定表示に切り替わるかを制御できます。
下の画像では、追従に設定したボックスが親ボックスの上辺 48pxの位置から固定表示されるように指定されています。
relative
fixed
absolute
画面固定
追従ヘッダー
粘着