CSS レイアウトを利用する

最終更新日: 2022年3月24日
R8 | R9

CSS レイアウトとは

CSS レイアウトとは、画面に表示される要素 (Wagbyの「モデル項目」）の配置を CSS だけで実現する技術です。さまざまな規格が提案されていますが、Wagby では CSS Flexbox という規格を採用しています。CSS Flexbox は Wagby がサポート対象とするすべての Web ブラウザで対応しています。

CSS レイアウトのメリットは次のとおりです。

  • 自動生成される HTML が単純かつ小サイズになる。
  • 画面レイアウトのカスタマイズが CSS だけで行えるようになる。
  • すべてのブラウザで同じ書式である。

なお互換性のため、これまで Wagby が提供していた HTML テーブルによる画面レイアウトも選択できます。

※ R9.0.0〜R9.0.4までは、ユーザが新規作成するモデルのレイアウトはHTMLテーブル方式です。ただしシステムモデル(juser,jgroupなど出荷時に含まれているモデル)は CSS レイアウトとなっています。
※ R9.1.0以降は、ユーザが新規作成するモデルおよびシステムモデルのいずれも標準は CSS レイアウト方式です。
※ 旧リポジトリを移行した場合は、旧リポジトリの設定が維持されます。（旧リポジトリのモデルのレイアウトがHTMLテーブル方式であれば、移行後もHTMLテーブル方式となります。）

定義方法

"画面 > その他 > 表示スタイル" で "CSS layout" を指定することができます。

図1 レイアウト方法の選択

カスタマイズ

生成される html では、各項目に id 属性が付与されます。この html に対応した CSS ファイルも生成されます。（例えば showJuser.css といったように、画面ごと、かつモデルごとに CSS ファイルが生成されます。）

レイアウトのカスタマイズを行う場合、この CSS ファイルに記述された設定を上書きした My ファイルを用意するとよいでしょう。（例えば MyShowJuser.css に、カスタマイズしたい内容だけを記述します。）

仕様・制約

注意

[注意] 従来のHTMLテーブルレイアウトと完全に同じ見た目ではありません。旧版からバージョンアップしてCSSレイアウトを利用する設定に変えた場合、差異があることを念頭に画面レイアウトの確認を行なってください。

  • 登録、更新画面および検索画面の入力項目の幅の標準は 15em となっています。これはおおむね14〜15文字の入力幅となります。（HTMLテーブル方式では、枠いっぱいまで入力欄が適用されていました。)
  • Wagby のレイアウト機能が提供する「表示比率」の扱いが変わります。項目の数と、表示比率で指定したパラメータの数が合わない場合（例えば 3 つの項目に対応した表示比率の設定が "50%,50%" と二つしか指定していなかった、など）これまでの HTML テーブル方式と見た目が合わなくなることがあります。このような場合は表示比率の設定を見直してください。
  • 「入力制御>日付・時刻」の「時刻入力方式」の設定は無視される。つまり時刻入力欄では、時分秒で分割した入力が行えません。（HTMLテーブル方式では時刻の入力欄は時分秒で分割されたリストボックスとなっていますが、CSSレイアウトではTimeTextBox部品を使うため。）代わりに「出力制御>詳細画面>日付・時刻」の「フォーマット」設定で「HH:mm」「HH:mm:ss」を選択した場合に時刻入力欄のフォーマットにもこの設定が反映されます。なおHH(時刻のみ)およびss(秒)は対応していません。

対応していない機能