コンテナ―

コンテナーはコントロールとそのコンテナー内の他のコンテナーを保持し、それらを同じように配置します。

全般

• ツールチップ - コンテナーに表示するツールチップです。このツールチップで、コントロールに表示する追加情報を提供します。

• 非表示 - true の場合、実行時にコントロールが非表示になります。

• 無効化 - true の場合、実行時にコントロールを無効化します。

イベント

• クリック時 - コンテナーがクリックされた際の挙動を設定します。

スタイル

• コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。

  注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。

• レイアウト - コンテナー内のコントロールの位置を決定します。

  • 横方向/縦方向 - コントロールの向きです。
  • 配置- コンテナー内のコントロールの配置です。
  • 折り返しを許可 - 選択すると、コントロールがコンテナー内で折り返されます。

  • スクロールを許可 - 選択すると、コンテナー内でのスクロールが許可されます。[スクロールを許可] を有効化するには、コンテナーの高さ (縦レイアウト) または幅 (横レイアウト) が固定である必要があります。

• 背景色 - コンテナーの背景色です。

• 枠線 - コントロールの枠線です。枠線の太さ、色、半径を設定できます。

• フォント - コンテナー レイアウトのフォント ファミリです。コンテナー内のすべてのコントロールで同じフォント ファミリが使用されます。既定では、このコントロールの直接の親コンテナーのフォント ファミリが継承されます。その場合、フォントに「Inherited」と表示されます。

• マージン- レイアウトのマージンです。既定では 0px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。

• パディング - レイアウトのパディングです。既定では、0px のパディングが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティは、[パディング] セクションの右側にある [リンク] ボタンをクリックして解除できます。

• サイズ - コンテナーの幅と高さです。既定では、[幅] と [高さ] は auto に設定されています。カスタムの値を設定するには、[auto] オプションの選択を解除し、任意の値と測定単位 (px、%、em) を入力します。
  残りの空きスペース全体を使用するには、ドロップダウンで [fill] オプションを選択します。[fill] オプションは以下の場合に利用可能です。

  • [高さ] では、コントロールのレイアウトが [縦方向] に設定されている場合

  • [幅] では、コントロールのレイアウトが [横方向] に設定されている場合

  最小サイズと最大サイズを設定するには、3 点リーダー アイコンをクリックして、[最小サイズ] と [最大サイズ] を展開します。

• 詳細設定 - コントロールの flex プロパティを表示します。

  • Flex basis - Flex 項目の元のサイズを設定してから、余分なスペースを均等に割り付けるか、除去します (px、%、em、auto)。

  • 伸び率 - 余分なスペースがある場合、flex 項目を、他の項目を基準にしてどれだけ拡大するかを指定します。

  • 縮み率 - 十分なスペースがない場合、flex 項目を、他の項目と比較してどれだけ縮小するかを指定します。

    詳しくは、Mozilla Developer Network のドキュメントをご覧ください。

重要: コンテナーのサイズが固定であり、その内側にあるコントロールが固定値よりも大きいスペースを占有する場合、[割り付け - 中央]、[割り付け - 下] は垂直方向に適用されません。また、[割り付け - 中央]、[割り付け - 右] は水平方向に適用されません。