レイアウト

レイアウト

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

Info要点
レイアウトでは、ビルドスペース内の要素のサイズと位置を制御します。要素の幅と高さを個別に設定し、要素のコンテナー外側のスペースを指定できます。

1. 説明

レイアウトでは、幅と高さによって要素のサイズを指定し、親コンテナーの各端からの距離によってポータルページ上の配置を指定します。この2つの設定により、ページ上で要素が占める領域の大きさと、その正確な位置が決まります。


たとえば、H-StackをCanvas内に配置した場合、各端を基準としたスタックの位置を個別に指定できます。


2. 設定可能な値

レイアウトの設定項目は、次の2つのグループに分かれています。

  1. 位置
  2. サイズ
2.1. 位置
このプロパティでは、コンテナー周囲のスペースを調整して、H-StackまたはV-Stackの配置を指定できます。この設定は、スタックがCanvas内に直接配置されている場合にのみ使用できます。スタックの各端から要素までの距離を設定します。

設定項目

説明 

単位

[T(上)]

Canvasの上端からの距離。

このプロパティの値は、ピクセルまたはパーセントで設定できます。

[L(左)]

Canvasの左端からの距離。

[R(右)]

Canvasの右端からの距離。

[B(下)]

Canvasの下端からの距離。

Notesメモ:位置の設定項目(T、L、R、B)は、スタックの直接の親要素がCanvasの場合にのみ表示されます。親コンテナーがH-Stack、V-Stack、またはポータルページ自体であるその他の要素では、親スタックの配置と間隔の設定によって位置が管理されるため、これらの設定項目は個別には表示されません。
2.2. サイズ
このプロパティでは、幅と高さを調整して要素の寸法を指定できます。カスタマイズには次の値を使用できます。
値 動作
[px] 幅と高さを固定のピクセル値で指定できます。画面や親コンテナーのサイズに関係なく、要素のサイズは維持されます。どのような状況でも要素を正確かつ一定のサイズにする必要がある場合に選択します。
[%] 親コンテナーで確定した幅または高さに対する割合を設定できます。要素のサイズを親コンテナーに合わせて比例させる場合に選択します。
[Auto] 要素内のコンテンツまたは子要素に応じて、要素のサイズを調整します。
Notesメモ:[Auto]では子要素が絶対配置されるため、子要素では使用できません。
[Fill]
(親コンテナーがH-StackまたはV-Stackの場合にのみ使用可能)
親コンテナーの主軸方向に沿って、残りのスペースを埋めるように拡張します。要素を引き伸ばして、利用可能なスペース全体を占めるようにする場合に選択します。

3. 画面イメージ

 

4. レイアウトを設定するには

  1. ビルドスペースで要素を選択し、マウスオーバー時に表示されるツールバーの三点リーダーをクリックして、右側に[プロパティ]ペインを開きます。
  2. ペイン上部の[レイアウト]セクションを確認します。
  3. 位置を設定します。
    1. 必要に応じて[T]、[L]、[R]、[B]の値を入力し、それぞれの単位([px]または[%])を選択します。
Notesメモ:Canvas内に配置されたスタック要素にのみ位置を設定できます。
  1. サイズを設定します。
    1. [幅(W)]:ドロップダウンから単位([px]または[%])を選択し、値を入力します。または、同じドロップダウンから[Auto]または[Fill]を選択します。
    2. [高さ(H)]:ドロップダウンから単位([px]または[%])を選択し、値を入力します。または、同じドロップダウンから[Auto]または[Fill]を選択します。
  2. 変更内容を保存するには、右上の[保存]をクリックします。

5. 適用可能な要素

レイアウトは、以下のプリミティブ要素と複合要素で使用できます。また、すべてのプリセットにスタイルプロパティとして表示されます。

  1. テキスト
  2. 画像
  3. アイコン
  4. Canvas
  5. H-Stack
  6. V-Stack
  7. メニュー
  8. ボタン
  9. ポータルフォーム
  10. 埋め込み

6. 注意点

  1. 位置の設定項目はCanvas内に適用 - T、L、R、Bは、スタックの親要素がCanvasの場合にのみ表示されます。Stack内では、親要素独自の配置と間隔の設定によって、子要素の配置が制御されます。詳細は、Stackのプロパティ*ドキュメントへのリンク*を参照してください。
  2. レイアウトと配置の連動 - レイアウトでは、ビルドスペース上の要素のサイズと位置を指定します。配置*配置に関するドキュメントへのリンク*では、コンテナーの境界内で要素のコンテンツを配置する位置を指定します。レイアウトで要素のサイズを変更すると、配置を変更していない場合でも、コンテンツの表示位置が変わることがあります。

その他のプロパティ

  1. 配置
  2. パディング
  3. 余白
  4. フォント
  5. 背景
  6. 角の丸み
  7. 枠線
  8. 影
  9. 不透明度
  10. 画像(塗りつぶし/Fit/Stretch)
  11. アイコン(サイズ、スタイル、色)
  12. Stack