UI Builder ページでコンポーネントを整理する

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む1読むのに数分
  • 列レイアウトでは、UI ビルダー ページでコンポーネントを整理します。列レイアウトの使用方法については、「UI ビルダー」を参照してください。

    列レイアウトを使用して、エクスペリエンスで役に立つ視覚的に魅力あるページを作成することができます。列レイアウトはコンポーネントを保持できる柔軟性に優れたコンテナの一種です。列レイアウトでは同じ幅または異なる幅の列を使用できます。列レイアウト全体を構成し、レイアウト内の個々の列も構成できます。たとえば、列レイアウトとレイアウト内の個々の列に異なる境界線の幅と色を設定します。列レイアウトでは、空白を作成するために UI ビルダー ページに空の列を含めることができます。1 つのページで複数列のレイアウトを使用します。たとえば、2 列のレイアウトにはヘッダーと画像を含めることができ、その下の 3 列のレイアウトにはリストやフォームなどのコンポーネントを含めることができます。

    構築を開始する前に、ページのレイアウトについて検討します。何を達成する必要があるのか、ページレイアウトをどの程度複雑にする必要があるのかについて分析してください。これらの質問により、使用する列レイアウトまたはレイアウトのタイプが決まります。

    UI Builder で使用可能な列レイアウトの例。

    UI ビルダー の列レイアウトでは、Flexbox、CSS グリッド、絶対位置などの標準ベースのカスケードスタイルシート (CSS) ルールと Web レイアウト技術を使用します。CSS でできることはすべて、ここで実行できます。CSS の詳細については、Mozilla のホームページを参照してください。
    注:
    以前のリリース (Utah または Tokyo) で作成された既存の UI ビルダー ページがある場合は、Vancouver にアップグレードして、ページに列レイアウトを追加できます。
    次のものは現在列レイアウトでサポートされていません。
    • 条件に基づく列の非表示/表示。
    • レイアウトの列をドラッグして並べ変えます。
    • 列の名前の変更 (列レイアウトの名前は変更できます)。