ラベルの幅

最終更新日: 2022年11月22日
R8 | R9

標準レイアウトでラベル幅を変更する

画面例

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

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

定義方法

モデル項目詳細定義の「出力制御 > 詳細画面」タブに用意された「スタイル」の「ラベルの幅」を設定します。
CSSレイアウトの場合は、すべての項目についてこの値を変更してください。

ラベル幅の設定
下図のように一括設定も可能です。詳細は「Designerの機能・その他のツール > モデル項目の一括設定」をご欄ください。
ラベル幅の一括設定

未設定の項目があった時の動作

幅が設定されていない項目は、次のように表示されます。

CSSレイアウトの場合

項目名の文字数分の幅となります。

最大値が適用される
HTMLテーブルの場合

入力した値の最大値(ここでは10%)に合わせられます。

HTMLテーブルの場合、いずれか1項目のみの設定でも全項目に対して反映されます。

最大値の25%が適用される

縦並びレイアウトでラベル幅を変更する

縦並びレイアウトについての詳細は「レイアウト(上級編) > 基本構成 > 項目を縦に並べる」をお読みください。

画面例

「年齢」と「趣味」を縦並びのレイアウトとして用意します。
その上で「年齢」のラベル幅を50%、「趣味」のラベル幅を10%とした例を図5に示します。

各項目のラベル幅を変更

定義方法

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

横並びレイアウトでラベル幅を変更する

横並びレイアウトについての詳細は「レイアウト(上級編) > 基本構成 > 項目を横に並べる」をお読みください。

画面例

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

各項目のラベル幅を変更

定義方法

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

比率ではなくピクセル値を指定する

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

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

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

ウィンドウサイズを変更してもラベル幅は変わらない

ワンポイント

ラベル幅を固定することで、全体の画面レイアウトはブラウザのウィンドウサイズ変更に対応させつつ、見た目のイメージは変わらないという画面を設計することができます。

注意

固定値の場合、Webブラウザによって見た目が変わることがあります。小さい値(例:10以下の数値)を指定したとき、ブラウザによってはこの数値を無視して自動調整する場合があります。

一覧表示画面への設定

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

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

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

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

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

ピクセル値で指定する場合の注意点

一覧表示項目の列幅をピクセル値で設定する場合は、次のいずれかの対応を同時に行なってください。

検索画面への設定

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

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

繰り返しコンテナへの設定

繰り返しコンテナ内の項目への(通常項目と同じく)「出力制御 > 詳細画面」タブに用意された「スタイル」の「ラベルの幅」を設定します。

なお入力フィールド長の設定によっては、列の幅が押し広げられることがあります。[詳細...]

入力ルール

"幅" に入力可能な値は数字とパーセント,px,em,remです。"高さ" に入力可能な値は数字とpx,em,rem です。

これらの入力項目に全角文字を入力したとき、内部で半角文字に変換されてリポジトリに書き込まれます。(リポジトリ再読み込み後、半角文字になっています。)

この変換処理が行われる項目は次のとおりです。

  • 出力制御>詳細画面>スタイル
    • ラベルの幅
    • ラベルの高さ
    • 値の幅
    • 値の高さ
  • 出力制御>一覧画面>スタイル
    • ラベルの幅
    • ラベルの高さ
    • 値の幅
    • 値の高さ
  • 検索制御>スタイル
    • ラベルの幅
    • ラベルの高さ