【Studio初心者ガイド】ボックスの並べ方・レイアウトについて｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

ボックスの並べ方やレイアウトは、ウェブデザインにおいて重要な要素です。ボックスを効果的に配置することで、視覚的に魅力的で、ユーザーフレンドリーなデザインを作り出すことができます。

この記事では、ボックスの基本的な並べ方や、それぞれのレイアウト手法のメリットを詳しく解説し、デザインの幅を広げるためのヒントを紹介します。

Studioのボックスについて

Studioでは、要素をただ配置するのではなく、「親要素」と「子要素」で構成されたボックス単位でレイアウトを作成していきます。

ボックスはページ内に配置し、その中に画像やテキストを置くことでデザインを構成します。

HTMLで言う「div」要素と同様に、Studioではボックスを使ってコンテンツを配置していきます。

すべてのテキストや画像はボックスの上に配置されます。ボックスをうまく活用することで、効率的かつ自由度の高いデザインが実現できます。

1.左側の追加パネルから「ボックス」（赤四角）を選んでドラッグ＆ドロップし、ボックスを配置します。※今回はあらかじめ親ボックス（ピンクのボックス）を設置しています

2.子要素を配置している親ボックスを選択すると、右パネルにレイアウト選択メニュー（赤四角）が出現します。計9箇所のポジションを選べます。

3.両端揃えや均等配置などの詳細なレイアウト設定は、右パネルの「水平」「垂直」セクション（赤四角）から行えます。

両端揃え（stretch）は、子要素の高さが親要素の高さに自動的に合わせて伸びる設定です。

子要素の高さがバラバラな場合でも自動的に揃うため、とても便利です。それぞれの子要素もグループ化を行い、その縦幅を「auto」に設定するのがポイントです。

均等配置は、親要素の中で子要素を均等な間隔で配置する方法です。2種類あります。

ボックスごとの各種設定（レイアウトや外観など）は、「右パネル」から行います。

スクリーン上のボックスを選択すると、右パネルに[ボックスタブ]（ピンク四角）が表示され、選択したボックスに応じた設定ができます。

操作内容	操作箇所の開き方	補足
(1) ボックス単位の各種設定	画面上の任意のボックスをクリック	右パネルに出るタブ（操作項目）は、選択中のボックスによって変わります。
(2) サイト／ページの各種設定	ボックス未選択の状態で右パネルを開く	「サイト設定」「ページ設定」タブが表示されます。
(3) バージョン履歴の確認	ナビゲーションの「バージョン履歴」アイコンをクリック	エディタの編集履歴を確認・管理できます。
(4) コメントモードへ切り替え	ナビゲーションの「コメント」アイコンをクリック	追加済みコメントが右パネルに表示されます。
(5) コンテンツ編集モードへ切り替え	ナビゲーションの「コンテンツ編集」アイコンをクリック	編集できる箇所が右パネルに表示されます。

スクリーン上のボックスを選択すると、右パネルに設定項目が表示されます。表示されるタブは、選んだボックスの種類に応じて変わります。

主なタブと役割は次のとおりです。

タブ名	選択ボックス	設定内容	関連記事群
ボックスタブ	すべてのボックス	レイアウト／外観／ポジション	ボックスごとの設定
変形タブ	すべてのボックス	トランスフォーム／アニメーション	アニメーション
設定タブ	すべてのボックス	リンク設定／タグ設定	ボックスのタグ・ID・リンク設定
画像タブ	画像ボックス	画像に関する各種設定	画像ボックス
テキストタブ	テキストボックス	テキストに関する各種設定	テキストボックス
データタブ	リスト、動的ページ内のボックス、動的リスト、動的モーダル	リストデータ／CMSデータとボックスの関連付け設定	リスト／動的ページ／動的リスト／動的モーダル
アイコンタブ	アイコンボックス	アイコンに関する各種設定	アイコンボックス
動画タブ	動画ボックス	動画に関する各種設定	動画ボックス
コンテンツタブ	カルーセル、リッチテキストボックス	各コンテンツに紐づく設定	カルーセル／リッチテキストボックス