ラベルの幅は、一つのレイアウト内の項目の中で、もっとも大きな値に合わせられます。

画面例

図1は、ラベル幅を10%に変更した例です。(ラベル幅の標準値は25%となっています。)

図1 ラベル幅を10%に変更した例

定義方法

ラベル幅を標準値25%よりも狭める場合は、すべての項目についてモデル項目詳細定義の「出力制御 - 詳細画面」タブに用意された「スタイル」の「ラベルの幅」を設定します。

図2 ラベル幅の設定

注意

すべての項目のラベル幅を変更してください。一つでも設定漏れがあると図3に示すようにもっとも大きい値(ここでは標準値の25%)に合わせられます。

図3 設定漏れのため(もっとも大きな値である)標準値の25%に合わせられた

逆に標準値25%よりも大きなラベル幅とする場合は、1つの項目について設定すればよいです。

図4 一つの項目のみラベル幅を50%としても、全体がこれに合わせられる

画面例

「顧客名称」と「顧客カナ」を縦並びのレイアウトとして用意します。
その上で「顧客名称」のラベル幅を50%、「顧客カナ」のラベル幅を10%とした例を図5に示します。

図5 各項目のラベル幅を変更

定義方法

それぞれの項目のラベル幅を設定します。

画面例

「顧客名称」と「顧客カナ」を横並びのレイアウト(両者の表示比率は50%ずつ)として用意します。
その上で「顧客名称」のラベル幅を50%、「顧客カナ」のラベル幅を10%とした例を図6に示します。
それぞれの項目のラベル幅が異なっていることがわかります。

図6 各項目のラベル幅を変更

定義方法

それぞれの項目のラベル幅を設定します。

ラベル幅の値に「%」を除いた数値のみを設定すると、ピクセル指定となります。
図7は、各ラベル幅をそれぞれ「120」と設定した例です。

図7 ラベル幅を120(ピクセル)と設定した

ここでブラウザのウィンドウ幅を縮小してみます。全体のレイアウトは横並び50%,50%を維持していますが、ラベル幅は120ピクセルで固定化されていることがわかります。

図8 ウィンドウサイズを変更してもラベル幅は変わらない
ラベル幅を固定と設定することで、全体の画面レイアウトはブラウザのウィンドウサイズ変更に対応させつつ、見た目のイメージは変わらないという画面を設計することができます。
固定値の場合、Webブラウザによって見た目が変わることがあります。小さい値(例:10以下の数値)を指定したとき、ブラウザによってはこの数値を無視して自動調整する場合があります。

一覧表示画面のラベル幅設定は、モデル項目詳細定義の「出力制御 - 一覧画面」タブに用意された「スタイル」の「ラベルの幅」を設定します。

図9 一覧表示画面のラベル幅の設定
ブラウザに IE 9/10/11 を用いた場合、一覧表示画面のラベル幅を固定にした場合のみスタイルに "table-layout:fixed" が付与されます。
一覧表示画面の「ラベル幅」と「折り返さない」設定を同時に設定した場合に IE とその他のブラウザで表示が異なることがあります。

比率で指定する場合の注意点

一覧表示項目の列幅は、各設定値の合計が100%となるように設定してください。

ただし一覧表示画面の行ごとに「コピー登録」や「詳細」といったボタンを用意したとき、ボタンの表示がずれることがあります。 これらのボタンの列幅を直接、指定することはできないため、このような場合は一覧表示の対象としている項目の列幅の合計を100%より小さめに設定して、回避してください。

検索画面のラベル幅設定は、モデル項目詳細定義の「検索制御」タブに用意された「スタイル」の「ラベルの幅」を設定します。

図10 検索画面のラベル幅の設定

登録・更新・詳細表示画面のリポジトリキーはpresentation/displayitem/@labelwidthです。

一覧表示画面のリポジトリキーはpresentation/displayitem/@labelwidthForShowListです。

検索画面のリポジトリキーはpresentation/displayitem/@labelwidthForSearchです。