CSS グリッドレイアウトを使用したページのビルド
UI ビルダー で CSS グリッドレイアウトを作成し、カスケードスタイルシート (CSS) でカスタマイズして、パフォーマンスを向上させることができます。
CSS グリッドは CSS の最も強力なレイアウトシステムです。CSS グリッドは、2 次元グリッド上にビルドされます。CSS グリッドを使用して、ページの作成方法を制御できます。UI ビルダー を使用し、ローコードレイアウト構成プロパティを使用して CSS グリッドレイアウトを実装します。高度なレイアウトでは、CSS コードを表示および編集してレイアウトをカスタマイズできます。CSS グリッドの詳細については、Mozilla のホームページを参照してください。
たとえば、3 列 3 行のグリッドで 9 つのセルを作成できます。これらのセル内にコンポーネントを配置することも、コンポーネントを複数のセルにまたがらせることもできます。
ページのレイアウトをカスタマイズすると、CSS グリッドを最大限に活用してページ全体を設計できます。詳細については、「UI ビルダーページでコンポーネントを整理する」を参照してください。
UI ビルダー インスタンス内の CSS レイアウトの詳細については、[sys_uib_template] テーブルで検索できます。
新しいレイアウトシステムでの CSS グリッドレイアウトの作成
UI ビルダー で CSS グリッドレイアウトを作成し、ローコード環境で強力なページをビルドします。
始める前に
必要なロール：admin
手順
-
[レイアウト] タブの [グリッド] を選択します。
-
[レイアウト] セクションで、[グリッド] がハイライト表示されます。
-
を選択し、ページを表示してテストします。
古いレイアウトシステムでの CSS グリッドレイアウトの作成
UI ビルダー で CSS グリッドレイアウトを作成し、カスケードスタイルシート (CSS) でカスタマイズして、パフォーマンスを向上させることができます。
始める前に
必要なロール：admin
このタスクについて
次の手順では、CSS グリッドを使用して CSS を変更し、ページのレイアウトをカスタマイズする方法を学習します。
手順
-
[レイアウト] タブをクリックし、2 行 2 列のレイアウトを選択します。
図 : 2. 標準の 2 行 2 列のレイアウト -
[レイアウトコードを編集] をクリックします。
図 : 3. レイアウトコードの編集 -
コードエディターを展開して、CSS コードを簡単に確認できるようにします。
図 : 4. コードエディターの展開 -
既存のスロットの CSS コードをコピーして、レイアウトに別のスロットを追加します。
CSS コードをコピーする方が、レイアウトに入力するよりも簡単です。
図 : 5. スロットの CSS コードをコピーする -
コピーしたコードの下に CSS コードを貼り付け、slotName と grid-area を一意の値に変更します。
図 : 6. CSS コードを貼り付ける -
新しい列とテンプレート領域を含むように、次のようにレイアウトルールを変更します。
-
"Grid-template-columns": "1fr 1fr",行を削除します。 - 2 番目の cell1 を cell1 の後に追加し、cell5 を cell4 の後に追加します。
図 : 7. レイアウトルールの変更 多くのさまざまな構成を設定できます。この例には、2 つの異なるグリッドテンプレート領域から作成された 2 つのグリッドがあります。変更される "grid-template-areas" プロパティは、同じ名前の CSS プロパティを設定しています。詳細については、「MDN grid-templates-areas」を参照してください。
図 : 8. グリッドテンプレート領域 -
-
展開されたビューを折りたたんで、[適用] をクリックします。
図 : 9. レイアウト変更の適用