入れ子レイアウトと隠しレイアウト

最終更新日: 2022年5月10日

縦並びの中に横並び

下図のように、縦並びのグループ内に横並びのグループを入れ子にして組み合わせることもできます。

縦並びレイアウト内の横並びレイアウト

設定方法

横並びと縦並びを組み合わせたレイアウトから続けます。
新たに「郵便番号」と「住所」項目を追加しました。

  1. 新しいグループを用意し、「郵便番号」と「住所」項目をドラッグ&ドロップで移動します。
    新しいグループを用意する
    ドラッグ&ドロップで項目を移動する
  2. このグループをマウスで選択し、ドラッグ&ドロップで「会社情報」グループの中へ配置します。
    グループの中にグループを配置する
  3. グループの「四角で囲む」を解除します。
    並び方向を「横」に変更し、表示比率を30%,70%とします。

    ワンポイント

    「四角で囲む」を解除すると、ラベルの変更が行えなくなります。
    再び「四角で囲む」を有効にするとラベルを変更できるようになります。

    設定欄の値を修正する

スクリーンエディタの編集を保存する

左側の設定欄の上部にある「レイアウト設定保存」ボタンをクリックし、編集内容を保存します。
この操作により、リポジトリに反映されます。

重要

「レイアウト設定保存」ボタンをクリックせずに他の画面に切り替えた場合、これまでの編集内容は反映されません。 ご注意ください。

レイアウト設定を保存する

他項目のラベル幅とあわせる

他項目のラベル幅と合わせる方法を説明します。

他項目のラベル幅とあわせた例

設定方法

今回は、他の項目のラベル幅はすべて25%になっているものとします。

他の項目のラベル幅を確認する

調整のため、横並びレイアウトの比率を 4:6 に変更します。

横並び表示比率の調整

郵便番号項目が "4:6" の "4" すなわち40%部分ですので、そのうちのラベル幅を他項目と同様に25%に近づけるため、0.25/0.4 で62.5%とみなします。空白の微調整を行い、ここでは64%と設定しました。

郵便番号項目のラベル幅の設定

もう一つの住所項目が "4:6" の "6" すなわち60%部分ですので、そのうちのラベル幅を他項目と同様に25%に近づけるため、0.25/0.6 で41.6%とみなします。見た目のバランスを考慮し、ここでは36%と設定してみました。

住所項目のラベル幅の設定

ラベル表示のカスタマイズ

もともとの「住所」というラベルを非表示にし、代わりに郵便番号項目のラベルを「住所」に変えた例を示します。

ラベル名の変更と、ラベル非表示化の組み合わせ

設定方法

住所項目のラベルを非表示とすることができます。

住所項目のラベルを非表示とする

郵便番号項目のラベル名を変更することができます。

郵便番号項目のラベル名を変更する

グループ同士を横に並べる

下図のようにグループ同士を横に並べたい場合、隠しレイアウトの中にグループを配置することで実現できます。

隠しレイアウトの中にグループを配置

設定方法

  1. 「顧客」グループと「会社」グループを用意します。
    「顧客」グループと「会社」グループ
  2. それぞれのグループに項目を配置します。
    グループ内に項目を配置
  3. 全体を収容するグループを追加します。
    グループの追加
  4. 追加したグループの中に、他のグループをすべて移動します。
    グループの追加
  5. 全体を収容するグループの「四角で囲む」を解除します。
    横並びで比率は50%,50%に設定します。
    ラベル、並び、表示比率の設定
  6. 最後に、左側の設定欄の上部にある「レイアウト設定保存」ボタンをクリックし、編集内容を保存します。
    この操作により、リポジトリに反映されます。
    レイアウト設定を保存する