› ユーザー インターフェイス › フォーム › ツールボックス › レイアウト

レイアウト

フォームのコンテンツを配置する場合、列、行、およびセルが役立ちます。デフォルトでは、フォームは単一の列と単一のセルで作成されます。さらに列、行、およびセルをフォームに追加できます。

フォームへの列の追加

列を使用して、フォームを縦に均等に分割します。たとえば、1 つの列を追加すると、フォームは 2 つの等しい部分に分割されます。2 つの列を追加すると、フォームは 3 つの等しい部分に分割されます。

  1. [設計] タブをクリックします。
  2. [ツールボックス] パネルで、[レイアウト] を展開し、[列] をクリックします。

    フォームに列が追加されます。

  3. プロパティ パネルで、必要に応じてデフォルトの幅を変更します。

    列の幅モードには固定またはパーセントの種類があり、フォーム レベルの設定に応じて決まります (フォームの全般プロパティを参照)。列の最大固定幅を 3000px を超える値にすることはできません。

    列を削除するには、列を選択し、列の上部に表示される をクリックします。

フォームへの行の追加

フォームをパネルとして水平に分割する行を追加します。

  1. [設計] タブをクリックします。
  2. [ツールボックス] パネルで、[レイアウト] を展開して、[行] をクリックします。

    フォームに行が追加されます。

  3. プロパティ パネルで、必要に応じてデフォルトの値を変更します。

    行を削除するには、行を選択し、行の上部に表示される をクリックします。

フォームへのセルの追加

セルを追加して、フォームにセクションを作成します。

セルをフォームまたはフォーム内の列に追加できます。セルをフォームに追加するには、列の外側のフォームをクリックし、フォーム内の列にセルを追加するには、列内をクリックします。

  1. [設計] タブで、[フォーム要素] をクリックします。
  2. [ツールボックス] パネルで、[レイアウト] を展開して [セル] をクリックします。

    フォームにセルが追加されます。

  3. セルの次のプロパティを構成します。

    • [全般]

      [名前] マッピング中にセルを識別しやすくするためのセルの名前。

      デフォルトでは、セル ID がセルの名前として表示されます。
      [タイトル]

      セルが折り畳み可能に設定されている場合に、ランタイムに表示されるセルのタイトル。
      [セキュリティ トークン]

      セルにセキュリティ トークンを適用することにより、ランタイムにセル コンテンツへのアクセスを制限します。「セキュリティ トークン」を参照してください。

      複数のセルに同じセキュリティ トークンを使用できます。フォームのインポートまたはエクスポートには、セルに関連付けられたセキュリティ トークンが含まれます。
      [方向]

      [垂直]: セル コントロールを垂直に表示します。

      [水平]: セル コントロールを水平に表示します。
      [表示可能]

      ランタイムにセルを表示します。

      セルが非表示に設定されている場合、セル内のすべてのコントロールが非表示になります。セル内の一部のコントロールのみを非表示にする場合は、それらのコントロールを別のセルに配置します。
      [折りたたみ可能]

      選択した場合、ランタイムにセルを折り畳み可能にして、折り畳みと展開を可能にします。

      テーマ、インライン、またはクラスなど、折り畳み可能なセルのヘッダー スタイルを設定する必要があります。
      [折りたたみ済み]

      選択すると、セルはランタイムにデフォルトで折り畳まれます。

      このプロパティは、電話フォームおよびタブレット フォームには適用されません。

    • [設計]

      [幅モード]

      セルの幅は、[固定] (ピクセル単位) または [パーセント] (ブラウザ ウィンドウに相対的) にすることができます。

      • セルのデフォルトの幅モードは [パーセント] です。ただし、幅モードをパーセントから固定幅に、または固定幅からパーセントに切り替えることができます。

      • セルのパーセント オプションは、フォームの幅がパーセント モードに設定されている場合にのみ使用できます。
      [幅]

      セルの幅。
      [最小の高さ]

      セルの最小の高さ。
      [パディング]

      セル内のテキストとセルの境界線の間のスペース。左、上、右、下のパディングの値を入力します。(デフォルト: 0,0,0,0)
      [整列]

      左、中央、または右のいずれかの、セル内のコントロールの配置。

      セルに水平方向のコントロールが多数あり、配置が左、中央、または右の場合、ランタイムに一部のコントロールが完全には表示されない場合があります。
      [マージン]

      セルのマージン。(デフォルト: 0,0,0,0)
      [スタイル]

      セルのスタイルは、事前定義されたテーマ、インライン スタイル、またはクラスに設定できます。

      • [テーマ]: 事前定義されたテーマ。

        テーマはグローバルに (フォームおよびサイトの外で) 定義され、サイトに関連付けられます。フォームはサイトの一部としてレンダリングされます。サイトに関連付けられたテーマによって、コントロールのスタイルが決まります。

      • [インライン]: セルの [罫線]、[境界線の色]、[バックグラウンド] を設定します。セルに背景イメージを使用するには、次の手順を実行します。

        1. [背景イメージを使用する] を選択します。

        2. カスタム イメージを使用するには、[イメージのパス] フィールドにイメージの名前を入力します。または、定義済みのイメージを使用するには、[ストアからイメージをロード] を選択してイメージを選択します。

        3. セルに合わせてイメージのサイズを変更するには、[自動的にサイズを変更] を選択します。

        インライン スタイルは、デフォルトのテーマを上書きします。

      • [クラス]: CSS クラス。このクラスは、テーマに関連付けられたスタイル シートで使用できるようになっている必要があります。それ以外の場合、セルはデフォルトのスタイルを使用します。

    • [関連付け]

      関連付けを参照してください。

    • セルを削除するには、セルを選択し、セルの上部に表示される をクリックします。セルまたはセル内のコントロールのいずれかが使用中の場合、セルを削除することはできません。

    • セルをコピーして貼り付けると、セルとそのコンテンツがコピーされて貼り付けられます。