CSS レイアウトを利用する

最終更新日: 2020年3月14日
R8 | R9

CSS レイアウトとは

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

CSS Flexbox のメリットは次のとおりです。

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

なお互換性のため、これまで Wagby が提供していた HTML テーブルによる画面レイアウトも選択できます。出荷時の標準は（従来の）HTML テーブル方式です。

R8.1.0からR8.2.3まで、CSS Grid という別の規格を試していましたが、IE/Edge では書式が異なるという問題がありました。そこで R8.3.1 から CSS Flexbox を採用することにしました。

CSSレイアウトはR8では非推奨です

CSSレイアウトはR9で大幅に書き直しました。CSSレイアウトを利用する場合、R9をお使いください。

定義方法

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

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

カスタマイズ

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

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

仕様・制約

  • 従来のHTMLテーブルレイアウトと完全に同じ見た目ではありません。旧版からバージョンアップしてCSS layoutレイアウトを利用する設定に変えた場合、差異があることを念頭に画面レイアウトの確認を行なってください。
  • CSS レイアウトでは Wagby のレイアウト機能が提供する「表示比率」の扱いが変わります。項目の数と、表示比率で指定したパラメータの数が合わない場合（例えば 3 つの項目に対応した表示比率の設定が "50%,50%" と二つしか指定していなかった、など）これまでの HTML テーブル方式と見た目が合わなくなることがあります。このような場合は表示比率の設定を見直してください。