配置

配置

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

要点

配置では、要素*link*のコンテンツをポータルページの画面レイアウト、キャンバス、H-Stack、V-Stack要素*link*内のどこに配置するかを制御します。

1. 説明

配置では、画面またはキャンバスコンテナー内の要素*link to elements section*の位置を、水平方向（左、中央、右）または垂直方向（上、中央、下）に指定します。これにより、ビジュアルレイアウト内の複数の要素をさまざまな位置に配置し、複雑な情報カードやヒーローセクションなどを作成できます。
以下の画像は、カードのプリセットを中央揃えから左揃えに変更した場合に、配置が各要素にどのように影響するかを示しています。

     

2. 設定可能な値

配置は、互いに独立した2つの軸で制御します。各軸には3つの選択肢があります。

  1. 水平方向の配置 - コンテンツを左右方向のどこに配置するかを制御します。
値 説明
左 コンテンツを左に揃えます。
最適な用途：本文、左寄せのラベルなど
中央 コンテンツを中央に配置し、見た目のバランスを整えます。
最適な用途：見出し、アイコン、CTAボタンなど
右 コンテンツを右に揃えます。
最適な用途：数値、通貨、末尾に配置する操作など
  1. 垂直方向の配置 - コンテンツを上下方向のどこに配置するかを制御します。
値 使用場面
上 コンテンツを上端に揃えます。
最適な用途：高さのあるコンテナー内の見出しなど
中央 要素の高さに対してコンテンツを垂直方向の中央に配置します。
最適な用途：アイコン、イラスト、空の状態など
下 コンテンツを要素のコンテナーの下端に揃えます。
最適な用途：アイコンの下に配置するラベル、フッターなど

3. 配置を設定するには

  1. ビルドスペースで要素を選択し、マウスオーバー時に表示されるツールバーの三点メニューをクリックして、右側の［プロパティ］ペインを開きます。
  2. 右ペインの［スタイル］タブに移動し、ペイン上部の［配置］コントロールを見つけます。ここには2つのアイコンボタングループがあり、左側は水平方向、右側は垂直方向の配置を設定します。
  3. UI要素の要件に応じて適切な配置を設定するため、水平方向または垂直方向のグループで目的のアイコンをクリックします。
  4. 変更内容を保存するには、右上の［保存］をクリックします。

4. 図による説明

以下の図は、各配置の値によってコンテンツが要素内のどこに配置されるかを示しています。

  

  

5. 対象の要素

配置は、キャンバスまたはスタック内に追加された、一覧に記載されているすべてのプリミティブ要素と複合要素で使用できます。

6. メモ

  1. 配置とパディングは相互に作用します - 配置は要素の境界内でのコンテンツの位置を指定し、パディング*link to Padding doc*は境界とコンテンツの間の内側の間隔を制御します。一方を調整すると、もう一方の見た目にも影響します。たとえば、パディングが均等でない要素に中央揃えを適用すると、パディング値を考慮して見た目上の中央がずれます。
  2. 水平スタックまたは垂直スタック内では、配置の動作が異なります - 要素を水平または垂直のスタックコンテナー内に配置すると、子要素の配置は個々の要素の配置プロパティではなく、スタック自体の配置プロパティによって制御されます。スタック内での配置の仕組みについては、スタックプロパティ*link to propertie's doc*を参照してください。

その他のプロパティ

  1. レイアウト
  2. パディング
  3. マージン
  4. フォント
  5. 背景
  6. 角の丸み
  7. 枠線
  8. 影
  9. 不透明度
  10. 画像
  11. アイコンと画像のスタイル
  12. スタックのスタイル