最近のアクセス：
ページ
履歴
バックリンク
[Responsive Sizes] プロパティ
[ Responsive Sizes ] は、
レスポンシブ テーブル
コントロールのプロパティです。このプロパティは、コントロールのプロパティリストおよびコンテキストメニューから使用できます。
このプロパティの目的は、4 つの異なる画面サイズに合わせてフォーム内のエレメントを調整して、
RWD
を作成できるようにすることです。
レスポンシブテーブルを右クリックすると、 [ Responsive Sizes ] プロパティが含まれるコンテキストメニューが表示されます:
メニュー内の [ Responsive Sizes ] 項目をクリックすると、画面サイズを選択するダイアログが表示されます。コンボボックスから画面サイズを選択し、選択した画面サイズに合わせて、画面上でのエレメントの配置を構成します:
使用可能な画面サイズは、次に示す、標準的なデバイスの画面に対応します (BootStrap フレームワークに基づく):
極小サイズのデバイス (xs) (768 px 未満のスマートフォン)
小サイズのデバイス (sm) (768 px 以上のタブレット)
中程度のサイズのデバイス (md) (992 px 以上のデスクトップ)
大きいサイズのデバイス (lg) (1200 px 以上のデスクトップ)
セルのプロパティ
ユーザーは、レスポンシブテーブル内の各セルについて、各画面サイズで異なるプロパティを設定できます。
Width
セルの幅をパーセント値で定義します。
幅はコンボボックスにパーセント値で表されます。選択できる値は、
Bootstrap
グリッドの列の配分と一致します。そのため、パーセント値が 100% を 12 分割した値になることがあります。
1 行のセルの幅の合計は 100% またはそれ以下にする必要があります。
このように設定しないと、行に収まらないセルが下に移動されます。
Offset
セルの左の余白をパーセント値で定義します。
指定した値に従って、セルを右に移動します。
幅の値の場合、オフセットはパーセント値でコンボボックスに表示され、選択可能な値は BootStrap グリッドの有効なオフセット値と一致します。
Visible
セルが表示されるかどうかを示します。
Move
列の順序を変更します。ユーザーは、画面サイズに応じて異なる場所に表示されるように、列のオフセットを宣言できます。
Label Width
「
[ Label Width ] プロパティ
」を参照してください。
プロパティの既定値
携帯電話などの小サイズの画面では、情報を表示する列を 1 列にする (列を積み重ねて表示する) のが最良の方法です。既定値はこれに基づいて設定されます。これに対して、タブレットやデスクトップなどのワイドスクリーンでは、情報を横方向に表示すると分かりやすくなります。
そのため、既定値は次のようになります。
極小サイズのデバイス
(768 px 未満のスマートフォン)
極小サイズのデバイスの場合、既定ではすべてのセルが幅の 100% を使用し、オフセットは 0 です。
すべてのセルの設定が、Width=100%、Offset=0%、Visible= TRUE になります。
小サイズのデバイス
(768 px 以上のタブレット)
各セルが幅の 100% を使用し、行内のセルの数でその幅が分割されます。セルには選択可能な値の範囲から幅が割り当てられ、Bootstrap グリッドの列の配分と一致します。合計の平均は 100% です。行に収まらないセルは下に移動されます。
すべてのセルの設定が、Offset=0%、Visible= TRUE になります。
中程度のサイズのデバイス
(992 px 以上のデスクトップ)
小サイズのデバイスの設定を継承します。
大きいサイズのデバイス
(1200 px 以上のデスクトップ)
中程度のサイズのデバイスの設定を継承します。
既定の設定の識別方法:
太字の情報は、その値が既定値ではないことを意味します。
例
下の画像では、中程度のサイズのデバイスの Width と Offset の設定が、1,4 のセルでは変更されています。そのため、値が太字で示されています。
同じ設定が大きなサイズのデバイスにも使用されていますが、値は太字では示されていません。これは、前の、より小さな画面サイズから値を継承しているためです。
コンテキストメニューの [ 既定を使用 ] をクリックすることで、既定値を選択することもできます。
中程度のサイズで継承が失われていない場合、中程度のサイズの画面は小サイズの画面の設定を継承します。同様に、大きいサイズの画面も中程度のサイズの画面の設定を継承します。
継承したプロパティ
画面サイズの設定は、特定の画面サイズと、より大きな画面サイズに適用されます (より大きなサイズ用に設定が指定されていない場合)。
より小さなサイズの画面用に設定が指定されていない場合は、既定値が 100% になります。これは Bootstrap の動作に基づいています。
参考情報
抽象エディターを使用する方法: Web トランザクションフォームの設計
レスポンシブ Web アプリケーションを設計する方法: グリッド内の列の非表示
レスポンシブ Web アプリケーションを設計する方法: フォーム内のエレメントの非表示
抽象エディターを使用する方法: レスポンシブテーブル内のセルの非表示
RWA でのレイアウトの調整