> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# フォームレイアウト

> YiDAフォームデザイナーのレイアウト設定を解説します。コンポーネント配置、カラム数の設定、レイアウトコンテナ、グループコンポーネントの活用方法、PC・モバイル・タブレット各デバイスでの表示調整まで詳しくご紹介します。

フォームデザイナーの基本設定が完了したら、ページ全体のレイアウトを個別に設定できます。

## 1. フォームレイアウトの概要

### 1.1 コンポーネントレイアウト

YiDAでは、コンポーネントはデフォルトで1カラムに配置されます。

**レイアウトコンテナ**、**グループ**、**サブフォーム（スプレッドシートモード）** の各コンポーネントは、デフォルトで幅の100%を占有します。その他のコンポーネントはすべて幅の50%を占有し、ページ幅の半分を使用します。

フォームで幅100%を使用したい場合は、**レイアウトコンテナ** をご利用ください。

コンポーネント

### 1.2 カラム数

2カラムレイアウトを使用するには、フォーム設定の属性パネルでカラム数をクリックします。

2カラムレイアウトを有効にした後、特定のコンポーネントを全幅で表示したい場合は、対象コンポーネントのプレミアム設定で2カラムオプションをクリックしてください。

フォーム設定 — PC設定

### 1.3 レイアウトコンテナ

レイアウトコンテナコンポーネントを使用すると、ページをより柔軟に配置できます。前述の幅100%への対応に加えて、任意のカラム数を設定することも可能です。

レイアウトコンテナの設定については、[レイアウトコンテナ](/ja/yida/form/wql6d2)を参照してください。

レイアウト設定

### 1.4 グループの使用

グループコンポーネントを使用すると、フォームをグループ分けし、グループフォームを追加できます。また、コンポーネントレイアウトにスタイルを適用し、視覚的に魅力的なページを作成することもできます。

設定方法は、次の画像を参照してください。

ページ設定

### 1.5 アクセスモード

プレビューアクセス：

フォーム画面でプレビューをクリックしてアプリにアクセスすると、現在のフォームの全体設定ページを表示できます。データの送信やフォーム設定の変更はできず、サイドバーナビゲーションも表示されません。ページ幅は1180ピクセルに固定されています。

保存アクセス：

保存をクリックすると、フォームはアプリセンターページに移動します。現在のアプリ上部のアクセスをクリックしてフォームを表示すると、サイドバーナビゲーションが表示されます。ナビゲーションバーをクリックすると、他のフォームページの表示やデータの送信が可能ですが、フォームの編集はできません。

### 1.6 マルチデバイス表示

上記5つのレイアウト方法について、モバイル表示はPC表示とは異なります。モバイルでは、すべてのフォームがデフォルトで1カラムレイアウトを使用します。

タブレットでも、レイアウトは自動的に最適化されます。

**注意**：モバイル向けに特定の要件がある場合は、フォーム上部のモバイル設定をクリックし、以下のようにマルチカラムレイアウトを設定してください。