スタイルの設定

ウィジェットの構成パネルの [スタイル] タブには、Web エクスペリエンスを構成するとき、ウィジェットを区別するアイコンとラベルを変更するためのオプションを含まれています。アイコンと名前は、アクティブなページの [アウトライン] ビューおよびウィジェットを接続する際の選択リストに表示されます。

ウィジェットをキャンバス周辺にドラッグして移動およびサイズ変更するのではなく、サイズと位置の明示的な値を設定できます。サイズと位置の設定は、ウィジェットが幅、高さ、および位置によってページ上にどのように配置されるかを定義します。これらの値をピクセル (px) またはパーセント (%) で指定して、コンテンツの表示方法を決めることができます。全画面ページまたはスクロール ページに追加されるウィジェットに適したサイズと位置の設定については、以下のセクションをご参照ください。

すべてのウィジェットに共通するスタイル設定には、次のものがあります。

• [親コンテナー内に維持] - ネストされたウィジェットが親ウィジェットの境界線の外にドラッグされないようにします。
• [背景] - 塗りつぶし色または画像を選択して、ウィジェットの背景を設定します。画像を選択した場合、[フィット]、[塗りつぶし]、[中央揃え]、[タイル]、または [ストレッチ] を使用してウィジェットの枠線内に配置できます。[フィット] を選択すると、ウィジェットは画像の周りに背景の塗りつぶし色を表示します。
• [枠線] - 枠線の色、スタイル (破線または点線)、および幅 (ピクセル単位) を選択して、ウィジェットの枠線を設定します。半径サイズ (ピクセルまたはパーセント) を変更して、ウィジェットの角を作成します。設定をロックして、4 つの角すべての半径を同期します。
• [ボックスの影] - 次の設定を使用してウィジェットの周囲に影の効果を追加します。
  • [オフセット X] - 影の水平距離を設定します。負の値にするとウィジェットの左側に影が配置され、正の値にすると右側に配置されます。
  • [オフセット Y] - 影の垂直距離を設定します。負の値にするとウィジェットの上側に影が配置され、正の値にすると下側に配置されます。
  • [ぼかしの半径] - ぼかし効果を影に追加します。
  • [拡張の半径] - 影のサイズを調整します。
  • [色] - 影の色を選択します。

全画面ページのレイアウト

全画面ページをアプリに追加した場合、自由形状のレイアウト内でウィジェットを整理します。ウィジェットをキャンバス周辺にドラッグして移動およびサイズ変更すると、それに応じて、[スタイル] パネルの [位置] と [サイズ] の設定が更新されます。

次の [位置] 設定を設定できます。

• [左] - ウィジェットの左端が親コンテナーの左端の右側にオフセットされる距離を指定します。
• [上] - ウィジェットの上端が親コンテナーの上端の下側にオフセットされる距離を指定します。
• [左] - ウィジェットの右端が親コンテナーの右端の左側にオフセットされる距離を指定します。
• [下] - ウィジェットの下端が親コンテナーの最下部の上側にオフセットされる距離を指定します。

すべての位置のプロパティ値は同時には有効になりません。このプロパティ値は 2 つの設定の組み合せです。

• [左] と [上] または [下]
• [右] と [上] または [下]

定義する値を手動で選択するには、[自動] から [カスタム] に切り替えます。位置の値を [自動] に設定すると、そのプロパティは自動的に設定されます。

位置のプロパティごとに単位を変更することもできます。

• [px] - ピクセル単位の絶対値。
• [%] - コンテナーの幅 (左、右) と高さ (上、下) のパーセンテージ。

[サイズ] 設定は、コンテナーの幅と高さの組み合せです。特定の値を [幅] と [高さ] に設定することも、[自動] 選択して自動的に設定されるようにすることもできます。

さらに細かく制御するには、[高さモード] オプションを変更します。

• [固定] - 幅と高さを別々に設定します。これがデフォルトです。
• [縦横比] - 幅の値および幅と高さの縦横比だけを設定します。

スクロール ページのブロック

スクロール ページをアプリに追加すると、そのレイアウトはブロック内に整理されます。ブロックは、行ウィジェットで使用したようなマルチフィールドのグリッド レイアウトを使用します。

ブロックには次の [サイズ] と [位置] の設定があります。

• [幅] - 固定幅をページの割合で設定します。
• [高さ] - 高さをピクセル単位で設定するか、[自動] を選択して、ブロックの高さを自動的に設定します。
• [オフセット X] - 水平方向のオフセットをピクセル単位で設定します。
• [オフセット Y] - 垂直方向のオフセットをピクセル単位で設定します。