---
title: "コンポーネントレイアウトで作業する"
slug: "work-with-a-component-layout"
abstract: "異なるサイズのブロックを作成して、セクションのグリッドシステムを用いてコンポーネントのレイアウトを構築する方法を説明しています。"
---
# コンポーネントレイアウトで作業する

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

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

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

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

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

> !注コンポーネントレイアウトの作成は非常に柔軟なプロセスです。グリッド上にブロックや要素を追加した後は、好きな位置にドラッグして移動できます。また、各要素のサイズは角をドラッグすることで変更できます。
> 
> 設計プロセスのどの段階でもグリッドを異なる構成に変えることは可能です。

## ブロックを描く

レイアウトの始め際には、グリッド上にブロック要素を追加することをお勧めします。これはセクションのグリッドにブロックを描くか、**セクション**コンテキストバーにある「**追加要素**」をクリックして行います。

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

1.  コンポーネントビルダーでコンポーネントのサムネイルをクリックすると、コンポーネントとそのバージョンが開かれます。
    
2.  キャンバスをクリックしてセクション **を選択し、ブロック** を置きたいグリッドシステムを可視化できます。
    
3.  キャンバスにブロックを置く方法:
    
    -   コンポーネントのキャンバス上で、グリッドシステムをクリックしてドラッグして、コンテナを置きたいエリアを描きます。このコンテナは自動的に**ブロック**に割り当てられますが、**カード、****イメージ**、**HTMLブロック**など他の種類のブロック要素に変更することもできます。
        
    -   セクションコンテキストバーで「 **要素を追加**」をクリックし、「 **ブロック要素** リスト」から要素を選択します。その後、クリックしてグリッド上にドラッグして、要素を入れたいエリアを描きます。
        
    -   セクションコンテキストバーで「 **要素を追加**」をクリックし、「 **ブロック要素** リスト」から要素を選択します。要素を選択した後に表示される位置ツールバーで、「 **セクション」内の「追加** 」をクリックしてブロックをグリッド上に配置します。
        
        ![elements\_list.png](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/elements_list.png)
        
4.  オプションで、右側のパネルのオプションを使ってコンテナのレイアウトや配置を変更することができます。
    

さらに、ブロック要素を追加したり、移動させたり、サイズを変えたり、セクションを追加したりしてレイアウトを進めることができます。複数のセクションがある場合は、各グリッドを独立して設定して行や列の追加や削除も可能です。さまざまな要素については [こちら](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/apply-rules-to-elements.html "Apply rules to elements")で詳しく、グリッドの追加や設定方法については [こちら](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components/add-and-configure-grids.html "Add and configure grids")でご覧いただけます。

## 要素を追加する

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

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

1.  コンポーネントビルダーでコンポーネントのサムネイルをクリックすると、コンポーネントとそのバージョンが開かれます。
    
2.  コンポーネントのキャンバス(グリッド上またはグリッド上に既に描かれたコンテナ内)をクリックしてコンテキストバーを開きます。次に「 **Add element** 」をクリックすると、利用可能なすべての要素のドロップダウンメニューが表示されます。それらは **「ブロック**」「 **テキスト**」「イン **ライン** 」の各要素の下にリストアップされています。
    
    ![Screenshot showing the list of elements to be added](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/elements.png)
    
3.  例えば「 **Card**」など、追加したい要素をクリックします。
    

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

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

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

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

-   もし要素がグリッド上に直接位置している場合は、コンテキストバーを開くために要素をクリックし、その後「 **Reposition element** :mdiDrag:」をクリックします。その要素を移動してグリッド上の別の場所に置きます。
    
    ![Screenshot of a block being repositioned](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/relocation_element.png)
    
-   要素がブロック内にある場合は、その要素をクリックしてコンテキストバーを開き、その後「 **Repositionelement** :mdiDrag:」をクリックします。その後、最初のブロック内の目的の目的地や、同じコンポーネントの別のブロック、または別のバージョンのコンポーネントのブロックをクリックして移動できます。
    
    ドロップ地点から50ピクセル以内に他の要素が存在する場合、宛先パネルが開きます。宛先パネルでは、近くにある他の要素に対して新しい要素をどこに追加するか選べます。
    
    :mdiSwapHorizontal: アイコンは、その要素が段落の前後に独立して配置されるのではなく、段落内に入れ子状に変数として追加されていることを示します。
    
    ![Screenshot of an element being repositioned in a block using a destination panel](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/relocation_block.png)
    

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

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

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

1.  コンポーネントビルダーで、前進または後退したい要素をクリックします。
2.  要素のコンテキストバーで、 **Bring forward** :mdiArrangeBringForward: または **Bring backward** :mdiArrangeSendBackward: をクリックしてください。これらのアイコンは、グリッド上で2つの要素が重なっている場合にのみ利用可能です。