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

1. 概要

キャンバス要素は、固定されたサイズの範囲内に内部要素を自由に配置できるレイアウトコンテナーです。要素をピクセル単位で正確に配置でき、ヒーローセクションなどの複雑なコンポーネントを一から作成できます。要素を左右または上下に隣接して配置すると、キャンバス内に横方向または縦方向のスタックが自動的に作成されます。1つのキャンバスに複数のスタックを配置でき、各スタックを個別に選択してスタイルを設定できます。

適している用途

1. 背景画像の上にテキストラベルを直接配置する場合など、要素を重ねる必要があるレイアウト
2. 複数の要素を正確に配置する必要があるデザイン
3. 標準の行または列の配置が適用できない、独自のダッシュボードブロックやカード
4. ポータルページのデザインで、スタック配置を使用せずに要素を配置する必要があるセクション

2. 表示プロパティ

キャンバスは、それ自体にはコンテンツを持たないレイアウト要素です。表示されるすべてのコンテンツは、キャンバス内に配置された子要素によるものです。

3. スタイルプロパティ

1. ［レイアウト］
2. ［背景］
3. ［内側の余白］
4. ［外側の余白］
5. ［枠線］
6. ［角丸］
7. ［影］
8. ［不透明度］

キャンバス内で要素がスタックされている場合、キャンバスとは別にスタックのスタイルを設定できます。キャンバスで使用できるプロパティに加えて、次のスタイルプロパティを設定できます。

1. ［配置］
2. ［スタックのスタイル］

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

［アクション］タブでは、ポータルユーザーがキャンバスをクリックして、設定済みの［クリック時］アクションを実行した場合の動作を指定します。次のアクションを設定できます。

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

5. 操作してみる

キャンバス要素を追加し、次の操作を行います。

1. キャンバスの［幅］を400px、［高さ］を300pxに設定し、［背景色］を指定します。画像要素をキャンバス内にドラッグし、［レイアウト］の［T］を0、［L］を0、［幅］を100%、［高さ］を100%に設定して、画像がキャンバス全体を覆うようにします。
2. テキスト要素を同じキャンバス内にドラッグし、［B］を16px、［L］を16pxに設定します。テキストが画像の上に重なり、左下隅に固定されます。
3. キャンバスの［角丸］を12pxに設定します。背景と、重なっている子要素の両方が、角丸の形状に合わせて切り取られます。
4. ［オーバーフロー］を［スクロール］に設定し、子要素がコンテナーの境界からはみ出すようにキャンバスの高さを小さくします。

6. メモ

1. キャンバスに角丸を適用すると、コンテナーの表面と、角に重なる子要素の両方が、角丸の形状に合わせて切り取られます。

7. 関連トピック

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