コンポーネントレイアウトで作業する

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

コンポーネントのレイアウトを作成するには、通常は事前にグリッドに描いたブロックにまとめて、そのコンポーネントのキャンバス上に要素を配置する必要があります。

新しいコンポーネントを作成すると、キャンバスは単一のセクションで構成されます。セクションにはコンテナを描くためのグリッドシステムが含まれており、blocksとも呼ばれます。グリッドを使って異なるサイズのブロックを追加し、それらをコンポーネントセクション内の適切な場所に移動させます。コンポーネントに要素を追加することも可能です。これは、コンポーネントキャンバス上に直接、あるいは既存のブロック内にあります。コンポーネントキャンバス上の各種ブロックや要素の配置とサイズが、コンポーネントのレイアウトを決定します。

要素をキャンバスに直接置くのではなく、ブロック内でラップするかどうかは、コンポーネントの期待されるデザインによります。シンプルなコンポーネントならキャンバスに直接要素を追加できますが、その場合は最終的にコンポーネントの最終的な見た目をコントロールしにくくなることもあります。これは、これらの要素の内容がサイズによって異なるため、最終的な大きさやキャンバス内の他の要素との配置に影響を与えるためです。

したがって、より複雑なデザインや、ヘッドライン、説明、ボタンなど複数の要素のデータソースを使った動的コンポーネントの場合は、要素を1つ以上のコンテナでラップすることを推奨します。これにより、内容が変わってもデザインを期待通りに保つことができます。例えば、説明の長さが変わる場合、コンテナを使うことで、説明のサイズに関わらずボタンが見出しの下に留まります。

このトピックでは、ブロックの描画方法やコンポーネントのグリッドシステム上に要素を追加する方法について説明します。

注記

コンポーネントレイアウトの作成は非常に柔軟なプロセスです。グリッド上にブロックや要素を追加した後は、好きな位置にドラッグして移動させることができます。また、各要素のサイズを角をドラッグすることで変更することもできます。

設計プロセスのどの段階でもグリッドを異なる構成に変えることは可能です。

ブロックを描く

まずはグリッド上にブロック要素を追加することをおすすめします。これはセクションのグリッド上にブロックを描くか、SectionコンテキストバーにあるAdd elementをクリックして行うことができます。

グリッドにブロック要素を追加するには:

Component builderでコンポーネントのサムネイルをクリックすると、コンポーネントとそのバージョンが開きます。
キャンバスをクリックしてSectionを選択し、ブロックを置きたいグリッドシステムを視覚化できます。
キャンバスにブロックを置く方法:
- コンポーネントのキャンバス上で、グリッドシステムをクリックしてドラッグして、コンテナを置きたいエリアを描きます。このコンテナは自動的にBlockに割り当てられますが、Card、Image、HTML Blockなど、別の種類のブロック要素に変更することも可能です。
- SectionコンテキストバーでAdd elementをクリックし、Block elementsリストから要素を選択します。その後、グリッド上をクリックしてドラッグして、要素を置きたいエリアを描きます。
- SectionコンテキストバーでAdd elementをクリックし、Block elementsリストから要素を選択します。要素を選択した後に表示されるロケーションツールバーで、Append inside Sectionをクリックしてブロックをグリッド上に配置します。
オプションで、右側のパネルのオプションを使ってコンテナのレイアウトや配置を変更することができます。

さらに、ブロック要素を追加したり、移動させたり、サイズを変えたり、セクションを追加したりしてレイアウトを進めることができます。複数のセクションがある場合は、各グリッドを独立して行や列の追加・削除なども可能です。さまざまな要素についての詳細やグリッドの追加・設定方法はこちらでご覧いただけます。

要素を追加する

コンポーネントのレイアウトをさらに定義するには、以前に描いたブロック内か、セクションのグリッドに直接要素を追加できます。

ブロックに要素を追加するには:

Component builderでコンポーネントのサムネイルをクリックすると、コンポーネントとそのバージョンが開きます。
コンポーネントのキャンバス(グリッド上またはグリッド上にすでに描かれたコンテナ内)をクリックするとコンテキストバーを開きます。次にAdd elementをクリックして、利用可能なすべての要素のドロップダウンメニューを開きます。それらはBlock、Text、Inline要素の下にリストされています。
例えば、追加したい要素をクリックしてください。 Card。

この要素はキャンバス上に追加されました。キャンバス内やブロック内での位置変更ができ、右側のペインにあるオプションを使って設定やスタイルも調整できます。

キャンバス内の要素を移動します

グリッド上にブロックや要素を追加し、以前に描いたブロックにネストされた要素を揃えた後は、すべての要素を動かしてコンポーネントのレイアウトを改善することができます。

キャンバス内の要素を移動させる方法は2つあります。

エレメントがグリッド上に直接位置している場合は、コンテキストバーを開くためにエレメントをクリックし、その後Reposition element をクリックします。移動して、その要素をグリッド上の別の場所に落とします。
もし要素がブロック内にある場合は、コンテキストバーを開くために要素をクリックし、その後Reposition element をクリックしてください。その後、最初のブロックや同じコンポーネントの別のブロック、あるいは別のバージョンのブロック内の目的の目的地をクリックして要素を移動できます。

ドロップ地点から50ピクセル以内に他の要素が存在する場合、宛先パネルが開きます。宛先パネルでは、近くにある他の要素に応じて新しい要素をどこに追加するか選べます。

アイコンは、その要素が段落の前後に独立して配置されるのではなく、段落内にネストされた変数として追加されていることを示します。

要素を前方または後方に動かす

グリッド上で2つの要素が重なった場合、背景にどの要素を、前景にどの要素を配置するかを決めることができます。

要素を前後に動かすには:

Component builderで、前進または後退したい要素をクリックします。
要素のコンテキストバーでBring forward またはBring backward をクリックします。これらのアイコンは、グリッド上で2つの要素が重なっている場合にのみ使用可能です。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、