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

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

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

{width="300"}

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

2. 境界線の表示オプションを有効にするには、切り替えスイッチを右に動かし、デザイン基準に従って設定します。

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

   {width="300"}

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

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

   • 境界線が表示される場所を決めるには、各​境界線の位置 チェックボックスを選択します。

   {width="250"}

3. 境界線の半径​に対して、角に対する曲線に応じて数値を設定します。

   値が0 （デフォルト）の場合、角は四角形になります。

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

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

• 幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。

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

    {width="250"}

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

    {width="250"}

「スタイル」タブが選択された右側のパネルで、マージン セクションを展開し、構造コンポーネント内のマージン間隔のオプションを設定します。 このスタイルは、コンポーネントの境界線の外側のスペースに制御するCSS margin パラメーターを複製し、他のコンポーネントから分離します。 コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

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

  {width="250"}

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

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

  {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 （デフォルト）の場合、角は四角形になります。

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

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

• 幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。

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

    {width="250"}

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

    {width="250"}

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

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

{width="300"}

「スタイル」タブが選択された右側のパネルで、マージン セクションを展開し、構造コンポーネント内のマージン間隔のオプションを設定します。 このスタイルは、コンポーネントの境界線の外側のスペースに制御するCSS margin パラメーターを複製し、他のコンポーネントから分離します。 コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

「スタイル」タブが選択された右側のパネルで、マージン セクションを展開し、構造コンポーネント内のマージン間隔のオプションを設定します。 このスタイルは、コンポーネントの境界線の外側のスペースに制御するCSS margin パラメーターを複製し、他のコンポーネントから分離します。 コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

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

  {width="250"}

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

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

  {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 （デフォルト）の場合、角は四角形になります。

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

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

• 幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。

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

    {width="250"}

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

    {width="250"}

「スタイル」タブが選択された右側のパネルで、マージン セクションを展開し、構造コンポーネント内のマージン間隔のオプションを設定します。 このスタイルは、コンポーネントの境界線の外側のスペースに制御するCSS margin パラメーターを複製し、他のコンポーネントから分離します。 コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

{width="250"}

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

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

{width="300"}

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

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

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

• 幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。

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

  {width="250"}

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

• スタイル - Solid、Dotted、Dashed​など、標準CSS line-style値のリストから値を選択します。

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

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

• 幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。

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

    {width="250"}

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

    {width="250"}

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

{width="250"}

「スタイル」タブが選択された右側のパネルで、マージン セクションを展開し、構造コンポーネント内のマージン間隔のオプションを設定します。 このスタイルは、コンポーネントの境界線の外側のスペースに制御するCSS margin パラメーターを複製し、他のコンポーネントから分離します。 コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

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

  {width="250"}

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

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

  {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 （デフォルト）の場合、角は四角形になります。

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

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

• 幅 - トグルを使用して、幅をピクセルまたはパーセント単位で設定します。

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

    {width="250"}

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

    {width="250"}

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

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

{width="300"}

「スタイル」タブが選択された右側のパネルで、マージン セクションを展開し、構造コンポーネント内のマージン間隔のオプションを設定します。 このスタイルは、コンポーネントの境界線の外側のスペースに制御するCSS margin パラメーターを複製し、他のコンポーネントから分離します。 コンポーネントの周囲にギャップを作成して、コンポーネントの位置と周囲のコンテンツのレイアウトに影響を与えます。

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}

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

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

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

  {width="250"}

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

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

  {width="250"}

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

  {width="250"}