---
title: "コンポーネントビルダーを使い始めましょう"
slug: "get-started-with-the-component-builder"
abstract: "コンポーネントを一から作ってComponent builderで公開するまでの基本を学びましょう。"
---
# コンポーネントビルダーを使い始めましょう

このトピックでは、コンポーネントビルダーでコンポーネントを作成する際に取るステップの概要を提供します。多くのステップについては、より詳細なドキュメントへのリンクを提供しています。このガイドはコンポーネント作成の流れを理解するための出発点として意図されており、リンク先のドキュメントでさらに詳しく読むことができます。

> !注コンポーネントを一から作る代わりに、[共有コンポーネントのコピーをインポート](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/get-started-with-the-component-builder/shared-libraries.html "Shared libraries") して、自分で作成する出発点として使うことも可能です。

コンポーネントを一から構築するには:

1.  ナビゲーションヘッダーで **「デザイン**」をクリックします。その後、左側のサイドバーでコンポーネント **ビルダー** リンクをクリックします。
2.  コンポーネントビルダーのコンポーネントタブで**「****コンポーネントを追加**」をクリックします。
3.  「 [新しいコンポーネントを作成する](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/work-with-components.md "Work with components") 」ダイアログで、コンポーネントの名前を入力し、そのコンポーネントが属するコレクションを選択します。 **「保存**」をクリックします。
4.  編集を開始するにはコンポーネントをクリックしてください。
5.  空のコンポーネントキャンバスはグリッドを含むセクションです。コンポーネントのレイアウト作業を始めるには、グリッドをクリックしてドラッグして1 [つ以上のコンテナを描い](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/work-with-a-component-layout.md "Work with a component layout")てください。これらのコンテナはグリッド上でドラッグすることで移動でき、サイズもいつでも変更できます。
6.  コンテナをクリックすると対応するコンテキストバーが開きます。コンテキストバーでは、コンテナが自動的に **Block**型が割り当てられているのがわかります。各コンテナの種類を変更するには、 **ブロック** 名の近くの矢印をクリックし、 **Card**、 **Image**、 **Block quote**、 **Component**、 **HTMLブロック**などの別のブロック要素を選択してください。
7.  コンテナ内で「 **[追加要素](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/use-elements-to-build-components.md "Use elements to build components")** 」をクリックすると、別の **ブロック要素**や **テキスト要素(コンテナ**内の **インライン要素** )を追加できます。また、コンポーネント内で別のコンポーネントを [ラップ](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/wrapping-code-in-a-component.md "Wrapping code in a component") することも可能です。さまざまな [種類の要素](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/get-started-with-the-component-builder/components-key-concepts-and-terms.html "Components key concepts and terms") についてはこちらで詳しく学びましょう。
8.  その後、エレメントに静的または [動的な](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component.md "Adding dynamic content to a component") コンテンツを追加でき、エレメント [の設定](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/configuring-an-element.md "Configuring an element") や [スタイル](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/styling-components.md "Styling components") も可能です。
9.  オプションとして、レスポンシブコンポーネントを作成するには、「 **バージョンを追加** 」または「 **複製バージョン** 」を何度もクリックして、異なるデバイスタイプごとにできるだけ多くのバージョンを追加できます。ブレークポイント設定 :mdiCellphoneLink: ツールを使って、各バージョンで使用するデバイスタイプを指定することもできます。
10.  コンポーネントが準備できたら、ページビルダーで使うために[ステージング](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/staging-and-publishing-components.md "Staging and publishing components")し、公開してウェブサイトで[](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/publish-content-in-sitecoreai.md "Publish content in SitecoreAI")公開できます。また、[コンポーネントの埋め込みコード](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/get-the-embedding-code-of-a-component.md "Get the embedding code of a component")(レスポンシブコンポーネントの場合は全バージョンも含む)も入手でき、他のページビルダーで使うことができます。