スタックのスタイル設定

スタックのスタイル設定

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

Info要点

スタックでは、キャンバスコンテナー内、またはポータルページ上で、子要素を並べて配置する方法を制御します。スタックの方向（水平または垂直）、コンテナー内での子要素の配置、要素間の間隔、および要素がスタックのサイズを超えた場合のオーバーフローの処理方法を設定できます。

1. 説明

スタックは、ポータルページ上またはキャンバス要素内で、子要素*link to elements page*を水平方向（H-Stack）または垂直方向（V-Stack）のいずれか一方向に表示するレイアウトです。子要素は主軸に沿って順番に配置され、一貫した間隔と配置が維持されます。スタックプロパティでは、この配置に関する4つの要素（方向、コンテナー内での子要素の配置、要素間の間隔、コンテナーの境界を超えた場合の処理）を制御します。*link each separately*

  

2. 設定可能な値

  1. ［スタックの種類］-スタック内の要素を横一列（H-Stack）または縦一列（V-Stack）のどちらに配置するかを指定します。
値 動作
［H-Stack］ 子要素を横軸に沿って左から右に配置します。

適した用途：ナビゲーションバー、アイコンの横並び、横に並べるコンテンツブロックなど、要素を横一列に表示するレイアウト。
［V-Stack］ 子要素を縦軸に沿って上から下に配置します。

適した用途：縦型メニュー、縦に積み重ねるコンテンツセクションなど、要素を縦一列に表示するレイアウト。
  1. ［コンポーネントを整列］-スタックコンテナー内での子要素の位置を制御します。両方の軸を同時に指定する9つの選択肢から、ドロップダウンで選択します。選択肢は、［左上］、［上中央］、［右上］、［左中央］、［中央］、［右中央］、［左下］、［下中央］、［右下］です。
Notesメモ：［コンポーネントを整列］では、スタックコンテナー内での子要素の配置を制御します。これは、各要素で使用でき、その要素自体のコンテンツを境界内に配置する［配置］*link to Alignment doc*プロパティとは異なります。要素単位の配置については、*link to Alignment doc*を参照してください。
  1. ［間隔］-主軸に沿って、連続する子要素間の間隔を設定します。間隔を0pxに設定すると子要素同士が隙間なく配置され、値を大きくすると要素間の間隔が広がります。
  1. ［オーバーフロー］-スタック内の子要素全体がコンテナーのサイズを超えた場合の処理を制御します。
選択肢 説明
［スクロール］ スタックの境界を超えた子要素を、スクロールして表示できます。

適した用途：スクロール可能なリスト、画像ギャラリー、項目のカルーセル。
［折り返し］ 主軸方向の範囲を超えた子要素を折り返し、新しい行（H-Stack）または新しい列（V-Stack）に自然に再配置します。

適した用途：タグクラウドやレスポンシブグリッド。
［逆順に折り返し］ 主軸方向の範囲を超えた子要素を折り返し、逆順に再配置します。つまり、末尾の項目から先に折り返されます。たとえば、新しい行は既存の行の下ではなく上に表示されます。

適した用途：右端を基準に配置するタググループや、下揃えで上方向に積み重ねる必要があるコンテンツ。

3. スタックのプロパティを設定するには

  1. ビルダー領域でスタックコンテナーを選択し、表示されるツールバーの［三点リーダー］をクリックして、右側の［プロパティ］パネルを開きます。
  2. パネル内の［スタック］アコーディオンをクリックして開きます。
  3. 横方向に配置する場合は［H-Stack］、縦方向に配置する場合は［V-Stack］をクリックします。
  4. ［コンポーネントを整列］ドロップダウンをクリックし、利用可能な9つの値（［左上］、［上］、［右上］、［左］、［中央］、［右］、［左下］、［下］、［右下］、［両端揃え］、［均等配置］）から目的の配置を選択します。
Notesメモ：
  1. ［両端揃え］では、最初の子要素をスタックの上端、最後の子要素を下端に固定し、その間を均等な間隔で配置します。
  2. ［均等配置］では、すべての子要素の前、間、後ろに均等な間隔を設けます。
  1. ［間隔］項目にpx単位で値を入力します。この値により、主軸に沿って連続する子要素間の間隔が決まります。
  2. ［オーバーフロー］ドロップダウンをクリックし、次のいずれかを選択します。
    1. ［スクロール］-はみ出した子要素をスタック内でスクロールできるようにします。
    2. ［折り返し］-スタックを超えた子要素を新しい行または列に再配置します。
    3. ［逆順に折り返し］-スタックを超えた子要素を逆順に再配置します。
  3. 変更内容を保持するには、右上の［保存］をクリックします。

4. 適用可能な要素

スタックのスタイルは、次の要素でのみ使用できます。

  1. V-Stack
  2. H-Stack
  3. メニュー

5. 注意点

  1. スタックの配置と要素の配置-スタックの［コンポーネントを整列］では、スタックコンテナー内での子要素の位置を制御します。各子要素の［配置］*link to Alignment doc*プロパティでは、その要素自体のコンテンツを境界内のどこに配置するかを制御します。これらのプロパティは個別に設定できます。
  2. 間隔は主軸方向にのみ適用-H-Stackでは、［間隔］によって子要素間の水平方向の間隔を設定し、V-Stackでは垂直方向の間隔を設定します。スタックには、行間隔と列間隔を個別に制御する設定はありません。
  3. ［オーバーフロー］と［レイアウト］の関係-［スクロール］と［折り返し］の効果が現れるのは、スタックに固定サイズ（レイアウト*link to Layout doc*で設定）が指定され、そのサイズが子要素の合計サイズより小さい場合のみです。スタックのサイズが［自動］または［全体に表示］に設定されている場合、親コンテナーまたはポータルページ内で子要素に合わせて拡張された後、オーバーフローが適用されます。

その他のプロパティ

  1. 配置
  2. レイアウト
  3. パディング
  4. マージン
  5. フォント
  6. 背景
  7. 角の丸み
  8. 枠線
  9. 影
  10. 不透明度
  11. 画像とアイコンのスタイル
  12. タブのスタイル