サポート > リポジトリ > レイアウト > CSS Grid レイアウトを利用する [ベータ版]

レイアウトの実装に CSS Grid を使うことができます。

CSS Grid レイアウトは、画面レイアウトの規格の一つです。画面を格子状のマス目として扱い、CSS だけで画面レイアウト設計を実現します。Wagby がサポート対象とするすべての Web ブラウザがこの規格を実装しているため、今後の Wagby は CSS Grid レイアウトをサポートしていきます。

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

  • 自動生成される HTML が単純かつ小サイズになる。
  • 画面レイアウトのカスタマイズが CSS だけで行えるようになる。

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

"画面 > その他 > 表示スタイル" で "CSSGrid" を指定することができます。標準は "HTMLテーブル" です。

図1 レイアウト方法の選択
  • IE 11/Edge には未対応です。この対応が終わり次第、ベータから正式とします。現在対応中です。
  • CSSGrid では Wagby のレイアウト機能が提供する「表示比率」の扱いが変わります。項目の数と、表示比率で指定したパラメータの数が合わない場合(例えば 3 つの項目に対応した表示比率の設定が "50%,50%" と二つしか指定していなかった、など)これまでの HTML テーブル方式と見た目が合わなくなることがあります。このような場合は表示比率の設定を見直してください。
Wagby Developer Day 2018