【簡単3分】Studioでボックスを横並びにする方法

Studioでボックスを横並びにするのは、誰でも簡単にできます。

完成イメージとしては、下記のとおりです。

今回はボックス2個で実演をしていますが、もしボックス3個だったとしても同じ手順で横並びにすることができます。

初心者でも3分で実装できる内容になっているので、ぜひこの機会に実装してみましょう！

Studioでボックスを横並びにする手順

まず最初の状況ですが、ボックスが2個並んでいる状況とします。

では、ピンク色ボックスと水色ボックスを横並びにしていきます。

Studioのセクションとボックスの違いと使い分けのコツについては「【Studio】セクションとボックスの違い｜使い分けのコツを解説！」で詳しく解説しています。

①：ボックス2個をグループ化します

ボックス2個を選択した状態で、右クリックで「グループ化」を選択します。

下記のようなレイヤーになっていればOKです。

②：ボックスを横並びにする

親ボックスを選択した状態で、右矢印を選択します。

下記のようにボックスが横並びになります。

ボックスを横並びにする時の注意点

ボックスを横並びにする時の注意点は、タブレット・スマホ時にデザインの崩れる可能性が高いことです。

実際にパソコン→タブレット→スマホで表示した時の、デザイン崩れを見てみます。

なのでレスポンシブ対応を必須で行うようにしましょう。

◼︎レスポンシブ対応のやり方

①画面下側になるレスポンシブ設定を変更していきます。

下記のように、デフォルト・タブレット・モバイルという表示が出てくるはずです。今回はスマホで見た時にボックスを縦並びにしたいので、モバイルを選択します。

ボックス2個を含んでいる親ボックスを選択しながら、下マークをクリックします。

これでスマホ版のレスポンシブ対応は完了です！タブレットのレスポンシブ対応が必要な場合は、同様にやっておくようにしましょう。

では最後に、プレビュー画面で確認してみます。

Studioのサイト制作は「Terace」にお任せ！