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

1. 概要

H-Stackは、直接の子要素を左から右へ配置するフローベースのレイアウトコンテナーです。設定された間隔に基づいて子要素を並べ、選択した設定に従ってコンテナー内に配置します。そのため、すべてのコンテンツは内部に配置された要素から提供され、H-Stack要素自体には表示コンテンツがありません。

主な用途：

1. ナビゲーションバーやツールバー
2. ボタンやコントロールのグループ
3. 横方向に配置したラベルと値
4. 統計値や指標の行
5. カードのヘッダーやフッター
6. タグやチップの行

2. 表示プロパティ

H-Stack要素は、独自のコンテンツ連携機能を持たないレイアウト要素です。表示コンテンツは、H-Stack内に配置された子要素やプリセットから提供されます。

表示されるすべてのコンテンツは、H-Stack内に配置された子要素から提供されます。

3. スタイルプロパティ

スタックの種類と配置：

1. ［配置］
   
2. ［レイアウト］ *link*
3. ［スタックのスタイル］
   
4. ［背景］ *link*
5. ［パディング］ *link*
6. ［余白］ *link*
7. ［角の丸み］ *link*
8. ［枠線］ *link*
9. ［影］ *link*
10. ［不透明度］ *link*

メモ：［スタイル］ペインでH-StackをV-Stackに切り替えると、すべての子要素とその設定を維持したまま、コンテナーが縦方向の配置に変換されます。

4. アクションプロパティ

［アクション］タブでは、ポータルユーザーがH-Stackをクリックして、事前設定された［クリック時］アクションを実行した際の動作を指定します。設定できるアクションは次のとおりです。

1. ［なし］ - H-Stackをクリックしても、アクションは実行されません。これは、［クリック時］アクションの初期設定です。
2. ［移動先］ - H-Stackをクリックすると、ポータルユーザーが移動先に移動します。この選択肢を選択すると、2つの追加プロパティが表示されます。
1. ［ページ／URL］ - 移動先を指定します。一般公開されているURLを直接入力するか、ドロップダウンに表示されるポータルページの一覧から選択できます。ドロップダウンには、すべての標準ページ（サインイン、サインアップ、パスワードのリセット、パスワードの作成）と、ポータルで作成したカスタムページが表示されます。
2. ［開く場所］ - 移動先を開く方法を指定します。［同じウィンドウ］を選択すると、現在のブラウザータブが再読み込みされ、移動先のポータルページまたはURLが表示されます。［新しいウィンドウ］を選択すると、別のブラウザータブで開きます。

5. 操作してみる

H-Stackを追加し、次の操作を試します。

1. ［ヒーローセクション］プリセットと［メニュー］要素をH-Stack内にドロップします。左側にロゴ、右側にメニューリンクを配置した全幅のナビゲーションバーを作成するには、［コンポーネントの配置］を［両端揃え］に、［幅］を［領域全体］に設定します。
2. 3つの［テキスト］要素を内部にドロップし、［間隔］を24pxに設定します。中央揃えの行を作成するには、［コンポーネントの配置］を［中央］に変更します。
3. H-Stackの［高さ］を小さくし、［オーバーフロー］を［折り返し］に設定して、領域を超えた子要素が2行目に折り返される様子を確認します。

6. メモ

1. H-Stackで制御できるのは直接の子要素のみ - 別のH-StackやCanvasなど、入れ子のコンテナーをH-Stack内に追加した場合、そのコンテナーは自身の子要素を個別に管理します。
2. 領域全体への拡張を指定できるのは、親要素がスタックの場合のみ - H-Stackの親要素がCanvas要素の場合、レイアウトプロパティの［幅］または［高さ］では［領域全体］を指定できません。
3. オーバーフローの効果が表示されるのは、H-Stackのサイズが固定されている場合のみ - スタックのサイズを［自動］に設定すると、子要素に合わせて領域が拡張されるため、オーバーフローが発生しない場合があります。

7. 関連トピック

1. ポータルページの設定と管理 *link*
2. V-Stack *link*