--- title: "構成要素:主要な概念と用語" slug: "components-key-concepts-and-terms" abstract: "コンポーネントビルダーの主要な概念とその定義を一覧化しています" --- # 構成要素:主要な概念と用語 このトピックでは、コンポーネントを扱うためのさまざまな重要な概念や用語について説明します。 ![Illustration of the key terms in the Component builder.](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/keyconcepts.png) ## 部品の解剖学 以下は、コンポーネントを一から構築する際に使われる主な用語です: - *Component* - ウェブページのカスタマイズ可能かつ再利用可能な部分。コンポーネントは、ナビバー、フッター、サイドバー、コンテンツなどの論理的なチャンクにデザインを分割し、例えばフッターの全インスタンスでリンクを変更する大量編集を可能にするために使用されます。通常は特定のビジネス目的、例えばウェビナーへの登録を促したり、ユーザーがコンテンツやサービスを見つける手助けをしたりします。 - *Static component* - そのコンポーネントのすべてのインスタンスがまったく同じであること。 - *Dynamic component* - コンポーネントインスタンスは、1つ以上の外部データソースから提供される動的なコンテンツをレンダリングします。動的コンポーネントは、記事のリストやさまざまな製品の提示に有用です。 - *Responsive component* - レスポンシブコンポーネントは、デバイスタイプや画面幅に適応するよう設計されています。元のコンポーネントを様々なバージョンに複製し、ブレークポイント設定に応じて異なるスタイルや設定を行うことでレスポンシブコンポーネントを作成できます。 - *Canvas* - すべてのコンテナと要素が配置されるコンポーネントの領域。デフォルトではキャンバスは単一のセクションで構成されていますが、必要に応じて追加も可能です。 - *Section* - コンポーネントの基盤要素である各セクションにはグリッドシステムがあり、コンテナが描画されます。デフォルトでは各コンポーネントは単一のセクションで作成されますが、同じコンポーネント内で異なるグリッド構成を使いたい場合は、同じ [コンポーネントに追加セクション](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components/add-and-configure-grids.html "Add and configure grids") を追加することも可能です。セクションはスタイルを付けることができます。 - *Context toolbars* - キャンバス内のコンテナや要素をクリックすると開くツールバーがあり、以下のような操作が可能です: - 選択した容器や要素の性質を定義してください。 - コンテナや要素を複製または削除してください。 - コンテナに要素を追加します。 - [複数の要素が1つに含まれている場合は、子要素または親要素を選択します。](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components/use-elements-to-build-components.html#UUID-67ce92f1-54b1-9c6f-7206-a2086fcf5469_section-idm4556533304574433242523633234 "Select an element") - コンテナ内の要素を移動させる。 - 複数の要素が重なった場合、その要素を前景または背景に移動させます。 - *Grid* - コンポーネントのレイアウトを迅速かつ正確に整理できる長方形の形状のシステム。グリッド上にクリックしてドラッグするだけで、異なるサイズのコンテナを作成し、それらをコンポーネントセクション内の適切な場所に移動できます。グリッドはデフォルトで12列5行で整理されますが、セクションごとに異なる [設定](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components/add-and-configure-grids.html "Add and configure grids") が可能です。 - *Container* - 要素のプレースホルダー。必要に応じてコンテナ同士を重ね合わせることも可能です。コンポーネントキャンバス上の各種コンテナの配置とサイズがコンポーネントの [レイアウト](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components/work-with-a-component-layout.html "Work with a component layout")を決定します。 - *Element* - ウェブデザインの [構成要素](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components/use-elements-to-build-components.html "Use elements to build components") 。コンポーネントビルダーを使えば、以下の要素をコンテナに追加できます: - *Text elements* - 段落、リスト項目、見出しなど。 - *Block elements* - 画像やカードのようなコンテンツの容器と考えられます。 - *Inline elements* - テキストやブロック要素の中に配置され、例えばボタン、バッジ、リンクなどを含めることができます。 - *Version* - コンポーネントの代替レンダリング。 [バージョンは](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components/work-with-component-versions.html "Work with component versions") レスポンシブコンポーネントを作成するために使われます。 - *Breakpoints* - 特定のデバイスタイプを含むピクセル単位のビューポート幅。コンポーネントビルダースタイルライブラリには、大きなタブレットやデスクトップ画面を含み *Large* 一般的なブレークポイントが含まれています。必要に応じて、 [独自のカスタムブレークポイントも追加](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/define-style-basics.html#UUID-daf0c3ad-c42f-ccf8-4628-12d1a89ceb79_section-idm4571788634678433477705624567 "Add a breakpoint") 可能です。 - *Attribute* - 要素は一連の属性によって定義されます。例えば、画像要素は画像ソース、キャプション、オルトテキストなど複数の属性を持ちます。 - *Property*\- 動的データを使用する場合、属性をデータツリーのプロパティにマッピングできます。そのプロパティは[データソースが外部](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/get-your-content-from-external-data-sources.html "Get your content from external data sources")の場合はデータ項目であり、[XMデータソース](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/get-your-content-from-an-xm-data-source.html "Get your content from an XM data source")を使用する場合はテンプレートとなります。 - *Object* - 動的データのリピーターを設定する際には、プロパティを繰り返したいプロパティを含む親フォルダに属性をマッピングできます。 - *Repeater* - 属性にマッピングしたデータが複数のオブジェクトを含む配列を含んでいる場合、リピーターを設定できます。例えば、複数の異なる商品が販売されており、それぞれに異なる人々のレビューのリストが存在します。 ## 要素 コンポーネントビルダーは、ブロック、テキスト要素、インライン要素タイプを作成して、論理的な [方法でスタイルを整理](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/creating-your-styles-library/apply-rules-to-elements.html "Apply rules to elements") できるようにします。以下は利用可能なさまざまな要素のリストです: ### ブロック要素 - セクション - 前述の通り、セクションは他の要素と異なり、コンテナに追加できず、他のセクションの下または上に表示されます。セクションを使ってコンポーネントに設定可能なグリッドを追加してください。 - カード - テーマを適用したり、他のブロック内にネストしたりできる要素です。この要素を使ってコンテンツの視覚的なフレーミングを提供します。 - 画像 - 任意のテキスト内容付き画像。 - ブロッククォート - この要素を別のブロック要素に追加すると、引用、ツイート、リッチなスタイルのテキスト参照が表示されます。 - ブロック - スタイルライブラリには含まれていない基本的なボックスです。グリッド上に描かれたコンテナは自動的にタイプ *ブロック*が割り当てられますが、後で他のブロック要素に変更することも可能です。 - HTMLブロック - この要素を使ってコンポーネントに [HTMLを追加](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/wrapping-code-in-a-component/add-html-and-javascript-to-a-component.html#UUID-6162ecea-25cc-ed41-b354-0ebea0f256df_section-idm4647171338411233250780273922 "Add an HTML block element") してください。 - スペーサー - この要素を使って、ブロックやカード内の個々の要素間に垂直方向に拡張可能な隙間を作ります。 ### テキスト要素 - パラグラフ - 見出し以外のすべてのテキストやコピーに使われる通常のテキスト要素。 - 見出し1 - 文書のメイン見出しで、最大の見出しに使われます。 - 方位2 - 2階航路。 - 見出し3 - 三階見出しで、よくキャッチフレーズに使われます。 - 見出し4 - 複雑な文書のためのさらなる見出しレベル。 - ヘディング5 - 利用可能な最も深いヘディングレベル。 - リスト項目 - 箇条書きで表示されるテキスト要素。 ### インライン要素 - リンク - この要素を使ってテキスト要素内にリンクを追加し、コンポーネントとウェブリンク間の関係を指定します。 - ボタン - このクリック可能な要素を使ってユーザーとのやり取りを作成します。 - バッジ - ステータスやタグ、ラベルなどの雑多な情報を表現するための非インタラクティブな要素。 - 日付 - 日付を入力するために使います。この要素はバッジ用に作成されたスタイルを再利用します。 - 変数 - スタイルのないインライン要素で、データマッピングを通じて動的データを表示します。内容はテキストです。各変数には独自のフォールバックがあります。変数要素は静的テキストと可変テキストを混ぜることができます。例えば*、{category}の**Price: {price}USD*やBy {author}などです。段落のテキストをマッピングすると、自動的に変数要素が作成されます。 ### 外部部品 - コンポーネント - この要素を使って [コンポーネントをネスト](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/wrapping-code-in-a-component.html "Wrapping code in a component")します。埋め込みコンポーネントは別のSitecoreコンポーネントでも、ReactやWebコンポーネントのような [外部コンポーネント](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/wrapping-code-in-a-component/add-an-external-component-to-the-component-builder.html "Add an external component to the Component builder")でも構いません。