レコード入力画面で1行に複数の項目を並べる方法と入力フォームの横幅が決定されるルール

「改行切替」機能で項目を同じ行番号に揃えることで横並び配置が可能になり、各フォームの横幅は項目ごとの「入力幅」設定をベースに自動調整されます。

レコード入力画面では、各項目に割り当てられる「行番号」を制御することで、1行に複数の入力フォームを並べるレイアウトを作成できます。

フォームの横幅については、項目設定で指定した「入力幅」が基準となりますが、ブラウザの表示幅や同じ行に並ぶ他の項目の数、さらには上下の行にある項目の幅との兼ね合いによって、システムが最適な表示になるよう自動的に伸縮させて調整する仕組みとなっています。

この仕様を理解して設定することで、入力項目が多い画面でもスクロール量を減らし、ユーザーにとって入力しやすい画面を構築できます。

【設定箇所】 左パネル > 対象データベース設定 > 表示設定 > レコード入力画面設定

入力画面設定の「改行切替」ボタンを使用して複数の項目に同じ行番号を割り当てて横に並べる

レコード入力画面で項目を横に並べるには、対象の項目同士を「同じ行」として認識させる必要があります。

  1. 「レコード入力画面設定」の一覧から、対象の設定(または新規追加)の「設定」ボタンをクリックします。
  2. 画面下部の項目リストにて、横に並べたい項目の左側にあるチェックボックスにチェックを入れます。
  3. リスト下部のプルダウンメニューから「改行切替」を選択し、「実行」ボタンをクリックします。
  4. 行番号が更新され、同じ番号になった項目が実際の入力画面で横一列に表示されます。個別に調整したい場合は、各項目の右側にある「改行切替」ボタンを直接クリックすることでも、1行ずつ行番号をずらしたりまとめたりできます。

項目設定の「入力幅」で指定した数値をベースにしつつ同じ行や上下行の項目数に合わせてフォームの長さが自動で伸縮する

入力フォームの横幅(長さ)は、以下のルールに基づいて決定されます。
特定の項目だけを極端に短く固定するといった制御は、周囲の項目とのバランスを保つための仕組み上、制限がある点にご留意ください。

1. 基準となる「入力幅」の設定:
各項目の「項目詳細設定」画面にある「入力幅」に入力した数値(半角文字数の目安)が、そのフォームの基本サイズとなります。

2. 自動調整の挙動:
1行に複数の項目を並べた場合、それぞれの項目に設定された「入力幅」の比率を維持しようとしますが、画面全体の幅に収まるようにシステム側で自動的に伸び縮みします。例えば、同じ行に「入力幅:20」の項目と「入力幅:80」の項目を並べた場合、全体の幅の中で「2:8」の割合に近い形で配分されます。

3. 上下行との連動:
入力画面全体のレイアウトの整合性を保つため、特定の行の項目幅が、上下の行にある項目の幅や数に影響を受けて微調整されることがあります。そのため、指定した数値通りのピクセル幅で完全に固定して表示させることはできません。

レイアウト設計における制約事項と「できないこと」

「楽楽販売」の入力画面レイアウトにおいて、正確なデータ構造を維持するために以下の操作や設定はできません。代替案と併せてご確認ください。

1. 明細項目の中に「見出し」や「区切り線」を挿入することはできません:
「見出し」「区切り線」「空白行」といったレイアウト用要素は、ヘッダ項目エリアにのみ配置可能です。明細行の途中にこれらを挟み込むことはできないため、明細ブロックの直前や直後に配置して情報を整理してください。

2. スマートフォン版では横並びレイアウトは適用されません:
パソコン版で「改行切替」を行い横並びに設定していても、スマートフォン版の入力画面では操作性を確保するための仕様上、すべての項目が一律で「縦一列」に並ぶレイアウトに自動変換されます。

3. 1画面に表示できる項目数には推奨値があります:
1つの入力画面にあまりに多くの項目(特に数百個単位)を並べると、画面の読み込み速度が低下したり、ブラウザ側でエラーが発生したりする恐れがあります。項目数が多い場合は、データベースを分割して「データベースリンク」で紐付けるか、入力メニューを複数作成して用途ごとに画面を分ける運用を検討してください。

【注意】DBリンク項目(検索プルダウン形式)は入力幅が適用されません
登録方法が「検索プルダウンを使用する」になっているデータベースリンク項目については、項目設定の「入力幅」に数値を設定している場合でも、システム仕様上、一定の固定幅(取得ボタンがある場合は320px、ない場合は270px)で強制的に表示されます。
表示幅を自由に制御して他の項目と揃えたい場合は、対象項目の登録方法を「検索ウィンドウを使用する」に変更した上で「入力幅」を設定してください。

関連マニュアル

詳細な仕様の違いや作成手順については、下記記事をご確認ください。

レコード入力画面のレイアウト変更や項目配置に関するマニュアル

項目の並び替え、非表示設定、改行切替(横並び設定)などの具体的な操作画面について詳しく解説しています。
レコード入力画面設定

入力フォームの幅や表示レイアウトの個別設定に関するマニュアル

項目ごとに「入力幅」を指定する手順や、一覧画面での表示幅の制御方法について記載されています。
入力画面や一覧画面の表示幅・レイアウトを変更したい(入力幅と表示幅の設定)

(記事ID:2882)