コンテンツコンポーネント content-components

右側のパネルで「スタイル」タブを選択した状態で、「背景」セクションを使用してコンポーネントの背景色を定義します。

チェックボックスを選択してカラーの四角形をクリックし、ピッカーからカラーを選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

{width="300"}

1. 「スタイル」タブを選択した右側のパネルで、「境界線」セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。

2. 切替スイッチを右に移動して図面枠の表示オプションを有効にし、設計基準に従って設定します。

   • 境界線のカラー を設定するには、チェックボックスを選択し、カラーの四角形をクリックして、ピッカーから色を選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

   {width="300"}

   • 境界線のサイズ （線の幅）を設定するには、上向き矢印アイコンと下向き矢印アイコンをクリックしてピクセル数を増減します。

   • 境界線スタイル を設定するには、標準 CSS border-style 値のリストから値を選択します。

   • 境界線の表示場所を指定するには、それぞれの 境界線の位置 チェックボックスを選択します。

   {width="250"}

3. 境界半径 には、コーナーに必要なカーブに従って数値を設定します。

   値が 0 （デフォルト）の場合、コーナーは 2 乗になります。

「スタイル」タブを選択した右側のパネルで、「サイズ」セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

• 高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、内容に応じて要素の高さのサイズを指定します。

• 幅 – 幅をピクセル単位またはパーセント単位で設定するには、切替スイッチを使用します。

  • 幅のパーセンテージの場合は、スライダーを使用してパーセンテージの値を設定します。 割合は、含まれるブロックのコンテンツボックス（パディングと境界線を除く）に基づいて要素のサイズを決定します。 例えば、値が 50 の場合、要素の幅は、その要素を含むブロックコンテンツの幅の 50% に設定されます。

    {width="250"}

  • ピクセルベースの幅の場合は、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、コンテンツに応じて要素の幅をサイズ設定します。

    {width="250"}

「スタイル」タブを選択した右側のパネルで、「余白」セクションを展開し、構造コンポーネント内の余白の間隔のオプションを設定します。 このスタイルは、コンポーネント境界線の外側の領域をコントロールする CSS margin パラメーターを複製して、他のコンポーネントと分離します。 コンポーネントの周囲に隙間ができ、周囲のコンテンツの配置やレイアウトに影響します。

デザインのニーズに応じて、マージンの値をピクセル単位で設定します。 コンポーネントのすべての辺、上部のボタン、左右または各辺の余白は、個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるマージン」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下の余白を同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右の余白を同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各余白を独立した値に設定するには、「上」設定と「下」設定の間、および「左」と「右」の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

「スタイル」タブを選択した右側のパネルで、「パディング」セクションを展開し、構造コンポーネント内のパディングのオプションを設定します。 このスタイルは、CSS padding パラメーター（コンポーネントのコンテンツとそのボーダーの間のスペース）を複製します。 パディングには、コンテンツとコンポーネントの境界線との距離を制御するために使用できる内部間隔が用意されています。

デザインのニーズに応じて、パディング値をピクセル単位で設定します。 コンポーネントのすべての辺、上部ボタン、左右または各辺のパディングを個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるパディングを使用」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下のパディングを同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右のパディングを同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各辺のパディングを独立した値に設定するには、上部と下部の設定の間、および左と右の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

右側のパネルで「スタイル」タブを選択した状態で、「背景」セクションを使用してコンポーネントの背景色を定義します。

チェックボックスを選択してカラーの四角形をクリックし、ピッカーからカラーを選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

{width="300"}

「スタイル」タブを選択した右側のパネルで、「テキスト」セクションを展開し、コンポーネントのテキストスタイルのオプションを設定します。

• フォントファミリー – 下向き矢印アイコンをクリックして、コンポーネント内のテキストのフォントファミリーを選択します。

• フォントサイズ – 上下の矢印アイコンをクリックして、フォントサイズを増減するか、値を入力します。 入力した値には、小数を使用できます。

• 行の高さ – 上下の矢印アイコンをクリックして行の高さを増減するか、値を入力します。 入力した値には、小数を使用できます。

  {width="250"}

• テキストスタイル - テキストスタイルのアイコンとして、「太字」、「斜体」、「下線」または「打ち消し線 を選択します。

• テキストの整列 - テキストの水平方向の整列のアイコンとして、左、中央、右、両端揃え を選択します。

• フォントカラー - カラーの四角形をクリックして、ピッカーからフォントカラーを選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

  {width="300"}

1. 「スタイル」タブを選択した右側のパネルで、「境界線」セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。

2. 切替スイッチを右に移動して図面枠の表示オプションを有効にし、設計基準に従って設定します。

   • 境界線のカラー を設定するには、チェックボックスを選択し、カラーの四角形をクリックして、ピッカーから色を選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

   {width="300"}

   • 境界線のサイズ （線の幅）を設定するには、上向き矢印アイコンと下向き矢印アイコンをクリックしてピクセル数を増減します。

   • 境界線スタイル を設定するには、標準 CSS border-style 値のリストから値を選択します。

   • 境界線の表示場所を指定するには、それぞれの 境界線の位置 チェックボックスを選択します。

   {width="250"}

3. 境界半径 には、コーナーに必要なカーブに従って数値を設定します。

   値が 0 （デフォルト）の場合、コーナーは 2 乗になります。

「スタイル」タブを選択した右側のパネルで、「サイズ」セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

• 高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、内容に応じて要素の高さのサイズを指定します。

• 幅 – 幅をピクセル単位またはパーセント単位で設定するには、切替スイッチを使用します。

  • 幅のパーセンテージの場合は、スライダーを使用してパーセンテージの値を設定します。 割合は、含まれるブロックのコンテンツボックス（パディングと境界線を除く）に基づいて要素のサイズを決定します。 例えば、値が 50 の場合、要素の幅は、その要素を含むブロックコンテンツの幅の 50% に設定されます。

    {width="250"}

  • ピクセルベースの幅の場合は、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、コンテンツに応じて要素の幅をサイズ設定します。

    {width="250"}

「スタイル」タブを選択した右側のパネルで、「余白」セクションを展開し、構造コンポーネント内の余白の間隔のオプションを設定します。 このスタイルは、コンポーネント境界線の外側の領域をコントロールする CSS margin パラメーターを複製して、他のコンポーネントと分離します。 コンポーネントの周囲に隙間ができ、周囲のコンテンツの配置やレイアウトに影響します。

デザインのニーズに応じて、マージンの値をピクセル単位で設定します。 コンポーネントのすべての辺、上部のボタン、左右または各辺の余白は、個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるマージン」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下の余白を同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右の余白を同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各余白を独立した値に設定するには、「上」設定と「下」設定の間、および「左」と「右」の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

「スタイル」タブを選択した右側のパネルで、「パディング」セクションを展開し、構造コンポーネント内のパディングのオプションを設定します。 このスタイルは、CSS padding パラメーター（コンポーネントのコンテンツとそのボーダーの間のスペース）を複製します。 パディングには、コンテンツとコンポーネントの境界線との距離を制御するために使用できる内部間隔が用意されています。

デザインのニーズに応じて、パディング値をピクセル単位で設定します。 コンポーネントのすべての辺、上部ボタン、左右または各辺のパディングを個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるパディングを使用」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下のパディングを同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右のパディングを同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各辺のパディングを独立した値に設定するには、上部と下部の設定の間、および左と右の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

値に CSS 準拠の追加の属性を適用するには、詳細 スタイル設定を使用します。 既存の属性の値を変更したり、新しい属性を追加したりできます。 スタイルは、親子コンポーネント（要素）の CSS 継承モデルを使用してコンポーネントに適用されます。

表示される属性は、コンポーネントに対して現在定義されているスタイルを反映しています。 CSS 定義 ​ に従って値を変更できます。 追加 （+）アイコンをクリックして、コンポーネントに新しいスタイル属性を追加します。

{width="250"}

右側のパネルで「スタイル」タブを選択した状態で、「背景」セクションを使用してコンポーネントの背景色を定義します。

チェックボックスを選択してカラーの四角形をクリックし、ピッカーからカラーを選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

{width="300"}

これらのスタイルは、テキストブロック全体に適用されます。 選択したテキスト文字列にインラインスタイルを適用できます。

「スタイル」タブを選択した右側のパネルで、「テキスト」セクションを展開し、コンポーネントのテキストスタイルのオプションを設定します。

• フォントファミリー – 下向き矢印アイコンをクリックして、コンポーネント内のテキストのフォントファミリーを選択します。

• フォントサイズ – 上下の矢印アイコンをクリックして、フォントサイズを増減するか、値を入力します。 入力した値には、小数を使用できます。

• 行の高さ – 上下の矢印アイコンをクリックして行の高さを増減するか、値を入力します。 入力した値には、小数を使用できます。

  {width="250"}

• テキストスタイル - テキストスタイルのアイコンとして、「太字」、「斜体」、「下線」または「打ち消し線 を選択します。

• テキストの整列 - テキストの水平方向の整列のアイコンとして、左、中央、右、両端揃え を選択します。

• フォントカラー - カラーの四角形をクリックして、ピッカーからフォントカラーを選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

  {width="300"}

1. 「スタイル」タブを選択した右側のパネルで、「境界線」セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。

2. 切替スイッチを右に移動して図面枠の表示オプションを有効にし、設計基準に従って設定します。

   • 境界線のカラー を設定するには、チェックボックスを選択し、カラーの四角形をクリックして、ピッカーから色を選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

   {width="300"}

   • 境界線のサイズ （線の幅）を設定するには、上向き矢印アイコンと下向き矢印アイコンをクリックしてピクセル数を増減します。

   • 境界線スタイル を設定するには、標準 CSS border-style 値のリストから値を選択します。

   • 境界線の表示場所を指定するには、それぞれの 境界線の位置 チェックボックスを選択します。

   {width="250"}

3. 境界半径 には、コーナーに必要なカーブに従って数値を設定します。

   値が 0 （デフォルト）の場合、コーナーは 2 乗になります。

「スタイル」タブを選択した右側のパネルで、「サイズ」セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

• 高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、内容に応じて要素の高さのサイズを指定します。

• 幅 – 幅をピクセル単位またはパーセント単位で設定するには、切替スイッチを使用します。

  • 幅のパーセンテージの場合は、スライダーを使用してパーセンテージの値を設定します。 割合は、含まれるブロックのコンテンツボックス（パディングと境界線を除く）に基づいて要素のサイズを決定します。 例えば、値が 50 の場合、要素の幅は、その要素を含むブロックコンテンツの幅の 50% に設定されます。

    {width="250"}

  • ピクセルベースの幅の場合は、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、コンテンツに応じて要素の幅をサイズ設定します。

    {width="250"}

「スタイル」タブを選択した右側のパネルで、「余白」セクションを展開し、構造コンポーネント内の余白の間隔のオプションを設定します。 このスタイルは、コンポーネント境界線の外側の領域をコントロールする CSS margin パラメーターを複製して、他のコンポーネントと分離します。 コンポーネントの周囲に隙間ができ、周囲のコンテンツの配置やレイアウトに影響します。

デザインのニーズに応じて、マージンの値をピクセル単位で設定します。 コンポーネントのすべての辺、上部のボタン、左右または各辺の余白は、個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるマージン」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下の余白を同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右の余白を同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各余白を独立した値に設定するには、「上」設定と「下」設定の間、および「左」と「右」の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

「スタイル」タブを選択した右側のパネルで、「パディング」セクションを展開し、構造コンポーネント内のパディングのオプションを設定します。 このスタイルは、CSS padding パラメーター（コンポーネントのコンテンツとそのボーダーの間のスペース）を複製します。 パディングには、コンテンツとコンポーネントの境界線との距離を制御するために使用できる内部間隔が用意されています。

デザインのニーズに応じて、パディング値をピクセル単位で設定します。 コンポーネントのすべての辺、上部ボタン、左右または各辺のパディングを個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるパディングを使用」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下のパディングを同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右のパディングを同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各辺のパディングを独立した値に設定するには、上部と下部の設定の間、および左と右の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

値に CSS 準拠の追加の属性を適用するには、詳細 スタイル設定を使用します。 既存の属性の値を変更したり、新しい属性を追加したりできます。 スタイルは、親子コンポーネント（要素）の CSS 継承モデルを使用してコンポーネントに適用されます。

表示される属性は、コンポーネントに対して現在定義されているスタイルを反映しています。 CSS 定義 ​ に従って値を変更できます。 追加 （+）アイコンをクリックして、コンポーネントに新しいスタイル属性を追加します。

{width="250"}

右側のパネルで「スタイル」タブを選択した状態で、「背景」セクションを使用してコンポーネントの背景色を定義します。

チェックボックスを選択してカラーの四角形をクリックし、ピッカーからカラーを選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

{width="300"}

「スタイル」タブを選択した右側のパネルで、「サイズ」セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

• 高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、内容に応じて要素の高さのサイズを指定します。

• 幅 – 幅をピクセル単位またはパーセント単位で設定するには、切替スイッチを使用します。

  • 幅のパーセンテージの場合は、スライダーを使用してパーセンテージの値を設定します。 割合は、含まれるブロックのコンテンツボックス（パディングと境界線を除く）に基づいて要素のサイズを決定します。 例えば、値が 50 の場合、要素の幅は、その要素を含むブロックコンテンツの幅の 50% に設定されます。

    {width="250"}

  • ピクセルベースの幅の場合は、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、コンテンツに応じて要素の幅をサイズ設定します。

    {width="250"}

「整列」セクションを展開し、使用する水平方向の整列（左、中央または右）を選択します。 このスタイルは標準の text-align CSS スタイルに変換され、コンポーネントを含むコンポーネント内でのコンポーネントの配置方法に影響します。

{width="250"}

「スタイル」タブを選択した右側のパネルで、「余白」セクションを展開し、構造コンポーネント内の余白の間隔のオプションを設定します。 このスタイルは、コンポーネント境界線の外側の領域をコントロールする CSS margin パラメーターを複製して、他のコンポーネントと分離します。 コンポーネントの周囲に隙間ができ、周囲のコンテンツの配置やレイアウトに影響します。

デザインのニーズに応じて、マージンの値をピクセル単位で設定します。 コンポーネントのすべての辺、上部のボタン、左右または各辺の余白は、個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるマージン」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下の余白を同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右の余白を同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各余白を独立した値に設定するには、「上」設定と「下」設定の間、および「左」と「右」の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

「スタイル」タブを選択した右側のパネルで、「パディング」セクションを展開し、構造コンポーネント内のパディングのオプションを設定します。 このスタイルは、CSS padding パラメーター（コンポーネントのコンテンツとそのボーダーの間のスペース）を複製します。 パディングには、コンテンツとコンポーネントの境界線との距離を制御するために使用できる内部間隔が用意されています。

デザインのニーズに応じて、パディング値をピクセル単位で設定します。 コンポーネントのすべての辺、上部ボタン、左右または各辺のパディングを個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるパディングを使用」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下のパディングを同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右のパディングを同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各辺のパディングを独立した値に設定するには、上部と下部の設定の間、および左と右の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

値に CSS 準拠の追加の属性を適用するには、詳細 スタイル設定を使用します。 既存の属性の値を変更したり、新しい属性を追加したりできます。 スタイルは、親子コンポーネント（要素）の CSS 継承モデルを使用してコンポーネントに適用されます。

表示される属性は、コンポーネントに対して現在定義されているスタイルを反映しています。 CSS 定義 ​ に従って値を変更できます。 追加 （+）アイコンをクリックして、コンポーネントに新しいスタイル属性を追加します。

{width="250"}

右側のパネルで「スタイル」タブを選択した状態で、「背景」セクションを使用してコンポーネントの背景色を定義します。

チェックボックスを選択してカラーの四角形をクリックし、ピッカーからカラーを選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

{width="300"}

1. 「スタイル」タブを選択した右側のパネルで、「境界線」セクションを展開し、コンポーネントの境界線を表示するオプションを設定します。

2. 切替スイッチを右に移動して図面枠の表示オプションを有効にし、設計基準に従って設定します。

   • 境界線のカラー を設定するには、チェックボックスを選択し、カラーの四角形をクリックして、ピッカーから色を選択します。 色を選択するには、RGB、HSL、HSB、または 16 進数値を入力します。 または、カラースライダーとカラーフィールドを使用して、カラーを選択できます。

   {width="300"}

   • 境界線のサイズ （線の幅）を設定するには、上向き矢印アイコンと下向き矢印アイコンをクリックしてピクセル数を増減します。

   • 境界線スタイル を設定するには、標準 CSS border-style 値のリストから値を選択します。

   • 境界線の表示場所を指定するには、それぞれの 境界線の位置 チェックボックスを選択します。

   {width="250"}

3. 境界半径 には、コーナーに必要なカーブに従って数値を設定します。

   値が 0 （デフォルト）の場合、コーナーは 2 乗になります。

「スタイル」タブを選択した右側のパネルで、「サイズ」セクションを展開し、コンポーネントの高さと幅のオプションを設定します。

• 高さ – 上下の矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、内容に応じて要素の高さのサイズを指定します。

• 幅 – 幅をピクセル単位またはパーセント単位で設定するには、切替スイッチを使用します。

  • 幅のパーセンテージの場合は、スライダーを使用してパーセンテージの値を設定します。 割合は、含まれるブロックのコンテンツボックス（パディングと境界線を除く）に基づいて要素のサイズを決定します。 例えば、値が 50 の場合、要素の幅は、その要素を含むブロックコンテンツの幅の 50% に設定されます。

    {width="250"}

  • ピクセルベースの幅の場合は、上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。 デフォルトは空の値（Auto）で、コンテンツに応じて要素の幅をサイズ設定します。

    {width="250"}

「整列」セクションを展開し、使用する水平方向と垂直方向の整列を選択します。 整列スタイルは、HTML コンポーネントを含むコンポーネント（構造またはコンテナ）内での配置に影響します。

水平方向揃えは、標準 text-alignCSS スタイルに変換され、左、中央または右から選択できます。 垂直方向の整列は、標準 vertical-align CSS スタイルに変換され、上、中央または下から選択できます。

{width="300"}

「スタイル」タブを選択した右側のパネルで、「余白」セクションを展開し、構造コンポーネント内の余白の間隔のオプションを設定します。 このスタイルは、コンポーネント境界線の外側の領域をコントロールする CSS margin パラメーターを複製して、他のコンポーネントと分離します。 コンポーネントの周囲に隙間ができ、周囲のコンテンツの配置やレイアウトに影響します。

デザインのニーズに応じて、マージンの値をピクセル単位で設定します。 コンポーネントのすべての辺、上部のボタン、左右または各辺の余白は、個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるマージン」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下の余白を同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右の余白を同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各余白を独立した値に設定するには、「上」設定と「下」設定の間、および「左」と「右」の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

「スタイル」タブを選択した右側のパネルで、「パディング」セクションを展開し、構造コンポーネント内のパディングのオプションを設定します。 このスタイルは、CSS padding パラメーター（コンポーネントのコンテンツとそのボーダーの間のスペース）を複製します。 パディングには、コンテンツとコンポーネントの境界線との距離を制御するために使用できる内部間隔が用意されています。

デザインのニーズに応じて、パディング値をピクセル単位で設定します。 コンポーネントのすべての辺、上部ボタン、左右または各辺のパディングを個別に設定できます。

• すべての辺 – すべての辺に適用する値を 1 つ設定するには、「各辺に異なるパディングを使用」チェックボックスをオフにします。 上下の矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 上下 – 上下のパディングを同じ値に設定するには、上下の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

• 左右 – 左右のパディングを同じ値に設定するには、左右の設定の間に ロック アイコンを設定します。 の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

• 独立 – 各辺のパディングを独立した値に設定するには、上部と下部の設定の間、および左と右の間に ロック解除 アイコンを設定します。 各設定で、の上向き矢印アイコンと下向き矢印アイコンをクリックして、ピクセル数を増減します。

  {width="250"}

値に CSS 準拠の追加の属性を適用するには、詳細 スタイル設定を使用します。 既存の属性の値を変更したり、新しい属性を追加したりできます。 スタイルは、親子コンポーネント（要素）の CSS 継承モデルを使用してコンポーネントに適用されます。

表示される属性は、コンポーネントに対して現在定義されているスタイルを反映しています。 CSS 定義 ​ に従って値を変更できます。 追加 （+）アイコンをクリックして、コンポーネントに新しいスタイル属性を追加します。

{width="250"}