UI ビルダー での Flexbox レイアウトの使用

UI ビルダー で Flexbox レイアウトを作成し、カスケードスタイルシート (CSS) でカスタマイズすることで、パフォーマンスを向上させることができます。

UI ビルダーで Flexbox レイアウトを使用してカスタムページを簡単にビルドできます。ページのレイアウトをカスタマイズすると、Flexbox を最大限に活用してページ全体を設計できます。詳細については、「UI ビルダーページでコンポーネントを整理する」を参照してください。

Flexbox は、CSS の 1 次元レイアウトシステムです。Flexbox は本質的に柔軟であるため、コンテンツのサイズがわからない場合に便利です。複雑なページをビルドする予定の場合は、構成パネルの [スタイル] タブまたは CSS を使用してページのレイアウトをカスタマイズできます。Flexbox の詳細については、Mozilla のホームページを参照してください。

レイアウト内のコンテンツの向きは、次の方法で変更できます。

• 行：行は、ブラウザーのデフォルト言語の向きに応じて、「左から右」または「右から左」に編成されます。英語のブラウザーの場合は「左から右」です。
• 行を逆にする：行は、ブラウザーのデフォルト言語の逆向きに、「右から左」または「左から右」に編成されます。
• 列：「上から下」または「下から上」
• 列を逆にする：「下から上」

  図 : 1. Flexbox の行と列の向き

  

• コンテンツの両端揃え：主軸に沿って配置を定義します。選択肢は次のとおりです。
  • フレックス開始：アイテムは、左揃えのコンテンツのように、フレックスの向きで先頭位置に置かれます。これは、デフォルトの設定です。
  • フレックス終了：アイテムは、右揃えのコンテンツのように、フレックスの向きで末尾位置に置かれます。
  • 間にスペースを配置：アイテムは均等に配置されます。
  • 外側にスペースを配置：アイテムは周囲に均等な間隔を置いて均等に配置されます。
  • 均等にスペースを配置：アイテム間の間隔は均等になります。
• アイテムの整列：交差軸に沿ってフレックスコンテンツを表示する方法を定義します。選択肢は次のとおりです。
  • ストレッチ (Stretch)：コンテンツを引き延ばしてコンテナ全体に収まるようにします。これは、デフォルトの設定です
  • フレックス開始：交差軸の先頭位置にコンテンツを配置します。
  • フレックス終了：交差軸の末尾位置にコンテンツを配置します。
  • 中央：コンテンツを交差軸の中央に配置します。
  • ベースシステム：コンテンツをベースライン配置と同じように配置します。
• 高さ：高さを自動または手動で設定します。
• 幅：Flexbox のアイテムの高さを自動または手動で設定します。
• マージン：Flexbox のアイテム間の最小距離を設定します。
• パディング (Padding)：Flexbox のアイテムの各側のパディングを設定します。

新しいレイアウトシステムでの Flexbox レイアウトの作成

UI ビルダー で Flexbox レイアウトを作成し、ローコード環境で強力なページをビルドします。

始める前に

必要なロール：admin

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、次を選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. UI ビルダー でのページの作成。
4. UI ビルダー ステージで [+ コンテンツを追加] ボタンを選択します。
5. [レイアウト] タブの [Flexbox] を選択します。
   
6. 構成パネルで [スタイル] タブを選択します。
7. [レイアウト] セクションで、Flexbox がハイライト表示されます。
   
8. [スタイル] タブの [レイアウト] セクションで、以下を変更できます。

   方向

   コンポーネントを水平に重ねるか、垂直に重ねるかを定義します。

   アイテムの整列

   コンテナ内のコンポーネントをグループとして整列する方法を定義します。

   コンテンツの両端揃え

   コンテナ内のコンポーネントをパックする方法または間隔を空ける方法を定義します。

   注:

   [詳細レイアウトオプションを表示 (Show advanced layout options)] を選択し、次の 2 つのオプションを表示します。

   ギャップ

   行と列の間のギャップのサイズを設定します。

   子要素を複数の行に折り返す

   コンポーネントを強制的に 1 行に表示するか、オーバーフローさせて複数行に表示するかを設定します。

   Flexbox のレイアウト構成については、Mozilla のホームページを参照してください。

9. オプション: CSS コードを編集するには、[スタイル] タブの下部にある [詳細設定オプションを表示 (Show advanced configuration options)] を選択した後で [CSS の表示と編集] オプションを選択します。
10. [保存] を選択します。
    ページが更新され、レイアウトに加えられた変更が表示されます。
11. コンポーネントをページに追加します。
    詳細については、「コンポーネントの追加と構成」を参照してください。
12. を選択し、ページを表示してテストします。

古いレイアウトシステムでの Flexbox レイアウトの作成

UI ビルダー で Flexbox レイアウトを作成し、カスケードスタイルシート (CSS) でカスタマイズすることで、パフォーマンスを向上させることができます。

始める前に

必要なロール：admin

このタスクについて

次の手順では、Flexbox を使用して CSS コードを変更し、ページのレイアウトをカスタマイズする方法を学習します。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、次を選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 「UI ビルダー でのページの作成」の手順を実行するか、またはページを開きます。
4. [レイアウト] タブをクリックし、2 列のレイアウトを選択します。

   図 : 2. 標準の 2 列レイアウト

   

5. [レイアウトコードを編集] をクリックします。

   図 : 3. レイアウトコードの編集

   

6. コードエディターを展開して、CSS コードを簡単に確認できるようにします。

   図 : 4. コードエディターの展開

   

7. 既存のスロットの CSS コードをコピーして、レイアウトに別のスロットを追加します。

   コードをコピーする方が、レイアウトに入力するよりも簡単です。

   図 : 5. スロットの CSS コードをコピーする

   

8. コピーしたコードの下にカンマを配置し、次の CSS コードを貼り付けます。
   1. "slotName" プロパティを "Column 3",に変更します。
   2. "flex" プロパティを "2" に変更します。
   3. "margin-left": "1rem" を追加します。

   図 : 6. CSS コードを貼り付ける

   

   "flex" プロパティを変更すると、列のサイズが大きくなります。"margin-left" を使用すると、前の列との間にスペースが追加されます。

9. 展開されたビューを折りたたんで、[適用] をクリックします。

   図 : 7. レイアウト変更の適用

   

タスクの結果

作成した新しい Flexbox レイアウトには、元の 2 列のレイアウトに追加した新しいスロットが表示されます。

図 : 8. 新しいカスタムレイアウト

[元の状態にリセット] をクリックすると、レイアウトの変更が元の状態にリセットされます。

図 : 9. レイアウトのリセット

関連タスク

• 古いレイアウトシステムでの CSS グリッドレイアウトの作成