レイアウトとスタイル

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

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

ページのレイアウトは、[コンテナー レイアウト] コントロールを使用して簡単にカスタマイズできます。これにより、複数のコントロールを特定の位置にグループ化して、個々のコントロール (コンテナー) のレイアウトと配置を設定することができます。

ページまたはコンテナー内のコントロールの位置をカスタマイズするには、以下の手順を実行します。

1. 対象のコントロールが存在するページまたはコンテナーを選択します。

2. [スタイル] パネルで、[レイアウト] ([縦方向]、[横方向]) とコントロールの配置 ([左]、[中央]、[右]、[画面に合わせて伸縮]、[上]、[中央]、[下]、[幅/高さを揃える]) を選択します。

   注:

   既定では、コントロールは 1 行に収まり、親コンテナーの配置を継承します。

3. (任意) 対象のコントロールで、利用可能なオプションの 1 つを選択して、継承された配置を上書きします。コンテナーを既定の配置に戻すには、上書きされた配置の選択を解除します。
4. (任意) 対象のコンテナーまたはページで、[折り返しを許可] オプションを選択してコントロールを複数行に折り返します。

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

既定では、コントロールのサイズは自動的に設定されます。[auto] を使用すると、内部のコンテンツのサイズに応じてコントロールのサイズが変更されます。たとえば、ボタン コントロールの幅と高さを [auto] に設定すると、ボタンのサイズがボタン内のテキストに基づいて大きくなるか、縮小されます。

特定の高さと幅も設定できます。幅/高さの最小サイズと最大サイズは、[スタイル] パネルの [サイズ] セクションの、3 点リーダー メニューのアイコン (...) をクリックして設定できます。

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

測定単位を選択するには、サイズ フィールドのドロップダウンメニューを使用するか、単位を入力します。たとえば、幅を 100 ピクセルに設定するには、[幅] フィールドに「100px」と入力します。

注:

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

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

アプリ内でのテキストの表示方法を変更するには、[フォント] セクションの属性 (フォント ファミリ、サイズ、色、スタイルなど) を調整します。

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

枠線を設定する

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

• 境界線の太さ
• 境界線の色
• 角の半径

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

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

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

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

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

[上/下] および [左/右] の値を解除して新たに設定するには、[マージン]/[パディング] セクションの右側にある [リンク] ボタンをクリックします。

注:

[コンテナー] コントロールではマージンとパディングを設定できますが、大半のコントロールではマージンのみを設定できます。

背景色を変更する

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

• RGB
• HEX

• HSL

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