レイアウトとスタイル

App Studio では、アプリのレイアウトをカスタマイズできる豊富なオプションが用意されており、さまざまなコンテナー コントロールやコントロールごとのスタイル オプションを使用できます。

コントロールの位置を設定する

ページのレイアウトは、コンテナー レイアウト コントロールを使用して簡単にカスタマイズできます。

ページやコンテナー内のコントロールの位置は、配置とレイアウトのオプションを使用して設定できます。

ページ コントロールとコンテナー コントロール内のコントロールの位置は、[レイアウト] セクションの方向 (縦方向/横方向) と配置の属性を使用して指定できます。既定では、コントロールは 1 行に収まります。[折り返しを許可] プロパティを設定すると、必要に応じてコントロールが複数行に折り返されて表示されます。

有効化すると、コンテナー内のコントロールが 1 行に収まらない場合に [折り返しを許可] プロパティが適用されます。

コンテナー内のコントロールは、そのコントロール独自の配置オプションを使用して親の配置設定を上書きすることができます。既定で親の配置設定を適用するには、選択されている配置アイコンを切り替えて、特定の配置設定をオフにします。

あるコントロールのグループに特定の位置を設定する場合は、1 つのコンテナー内に対象のコントロールを追加し、そのコンテナーのレイアウトと配置を設定します。

コントロールのサイズを変更する

既定では、コントロールのサイズは自動的に設定されます。[auto] に設定すると、コントロール内のコンテンツのサイズに従って自動で設定されます。たとえばボタン コントロールの幅と高さが [auto] に設定されている場合、ボタンのサイズはボタン内のテキストに基づいて拡大/縮小されます。

また、特定の高さと幅を設定することもできます。幅/高さの最小サイズと最大サイズは、[サイズ] セクションの (...) アイコンをクリックして設定できます。

測定単位は %、px (ピクセル)、および em (要素のフォント サイズに相対的) です。たとえば、「3em」は、現在のフォントの 3 倍のサイズを意味します。

測定単位を選択する。測定単位は、単位のドロップダウン リストから選択するか、キーボードで直接単位を入力し Enter キーを押します。たとえば、幅を 50% に設定するには「50%」と入力します。

測定単位を指定しない場合、既定でピクセル (px) に設定されます。

フォントをカスタマイズする

アプリでのテキストの表示方法を変更するには、フォント ファミリ、フォント サイズ、フォントの色、およびフォント スタイル (太字、斜体、下線) の属性を調整します。

色の値の横にある矢印をクリックして、RGB、HEX、HSL の間で色を切り替えることができます。

枠線を設定する

[枠線] セクションのプロパティは次の 3 つです。

• 枠線の太さ
• 枠線の色
• 角の半径

これらの属性の測定単位はピクセルです。

角の半径を使用して円形ボタンを作成する円形のボタンは、[角の半径] プロパティを変更して作成できます。

コントロールの配置を変更する

コントロールとコンテナーの配置は、[マージン] と [パディング] を使用して設定できます。

[マージン] はコントロールの周囲の空白を設定します。

[パディング] はコントロールとその内側にあるコンテンツの間の空白を設定します。

[コンテナー] コントロールでは [マージン] セクションと [パディング] セクションが使用できますが、その他のほとんどのコントロールでは、[マージン] セクションしか使用できません。

[マージン] セクションと [パディング] セクションの両方で、上/下および左/右の値のリンクを解除して個別に設定できます。

背景色を変更する

以下の 3 つの色モデルのいずれかを使用して、コントロールの背景色を変更できます。

• RGB
• HEX

• HSL

  背景色を変更するには、色の値の横にある矢印をクリックします。