1. Component builderを使い始めましょう

Components主要な概念と用語

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

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

 

このトピックでは、Componentsを扱うのに役立つさまざまな重要な概念や用語について説明します。

Illustration of the key terms in the Component builder.

部品の解剖学

以下は、コンポーネントを一から構築する際に使われる主な用語です:

  • Component - ウェブページのカスタマイズ可能かつ再利用可能な部分。Componentsは、ナビバー、フッター、サイドバー、コンテンツなどの論理的なチャンクにデザインを分割したり、例えばフッターのすべてのインスタンスでリンクを変更する大量編集を可能にするために使われます。通常、ウェビナーへの登録を促したり、ユーザーがコンテンツやサービスを見つける手助けをしたりと、特定のビジネス目的を目的としています。

    • Static component - そのコンポーネントのすべてのインスタンスがまったく同じであること。

    • Dynamic component - コンポーネントインスタンスは、1つ以上の外部データソースから提供される動的なコンテンツをレンダリングします。動的コンポーネントは記事のリストや様々な商品の提示に役立ちます。

    • Responsive component - レスポンシブコンポーネントは、デバイスタイプや画面幅に適応するよう設計されています。元のコンポーネントを複製して、ブレークポイント設定に応じて異なるスタイルや設定を行うことでレスポンシブコンポーネントを作成できます。

  • Canvas - すべての容器と要素が配置されるコンポーネントの面積。デフォルトではキャンバスは単一のセクションで構成されていますが、必要に応じて追加も可能です。

  • Section - コンポーネントの基礎要素であり、各セクションにはコンテナが描かれるグリッドシステムがあります。デフォルトでは各コンポーネントは単一のセクションで作成されますが、同じコンポーネント内で異なるグリッド構成を使いたい場合は、同じコンポーネントに追加の セクション を追加することもできます。セクションはスタイル化できます。

  • Context toolbars - キャンバス内のコンテナや要素をクリックすると開くツールバーがあり、以下のような操作が可能です:

  • Grid - コンポーネントのレイアウトを迅速かつ正確に整理できる長方形の形状のシステム。クリックしてグリッドにドラッグするだけで、異なるサイズのコンテナを作成し、それらをコンポーネントセクション内の適切な場所に移動できます。グリッドはデフォルトで12列5行で整理されていますが、各セクションで異なる 設定 が可能です。

  • Container - 要素のプレースホルダー。必要に応じてコンテナ同士を重ねて設置することも可能です。コンポーネントキャンバス上の各種コンテナの配置やサイズがコンポーネント のレイアウトを決定します。

  • Element - ウェブデザインの 構成 要素。Componentビルダーを使えば、以下の要素をコンテナに追加できます:

    • Text elements - 段落、リスト項目、見出しなど。

    • Block elements - 画像やカードのようなコンテンツの容器と考えられます。

    • Inline elements - テキストやブロック要素の中に配置され、例えばボタン、バッジ、リンクなどを含めることができます。

  • Version - コンポーネントの代替レンダリング。 バージョンは レスポンシブなコンポーネントを作成するために使われます。

  • Breakpoints - 特定のデバイスタイプを含むピクセル単位のビューポート幅。ComponentビルダーのStylesライブラリには共通のブレークポイントが含まれており、大型タブレットやデスクトップ画面Large含まれます。必要に応じて 、自分だけのカスタムブレークポイントを追加 することもできます。

  • Attribute - 要素は一連の属性によって定義されます。例えば、Image要素にはImage source、Caption、Alt textなど複数の属性があります。

  • Property- 動的データを使用する場合、属性をデータツリーのプロパティにマッピングできます。このプロパティはデータソースが外部であればデータ項目であり、XMデータソースを使用している場合はテンプレートです。

  • Object - 動的データのリピーターを設定する際には、プロパティを繰り返したいプロパティを含む親フォルダに属性をマッピングできます。

  • Repeater - 複数のオブジェクトを含む配列を含むデータにマッピングした要素をリピーターに設定できます。例えば、さまざまな商品が販売されており、それぞれに異なる人々のレビューリストが掲載されています。

要素

Componentビルダーは、ブロック、テキスト要素、インライン要素タイプを作成して、論理的な 方法でスタイルを整理 できるようにします。以下は利用可能なさまざまな要素のリストです:

Block elements

  • Section - 前述の通り、セクションは他の要素と異なり、コンテナに追加できず、他のセクションの下または上に表示されます。セクションを使ってコンポーネントに設定可能なグリッドを追加しましょう。

  • Card - テーマを適用し、他のブロック内にネストできる要素。この要素を使って、コンテンツの視覚的な枠組みを提供します。

  • Image - オプションでテキスト内容を添える画像。

  • Block quote - この要素を別のブロック要素に追加し、引用、ツイート、リッチスタイルのテキスト参照を表示する。

  • Block - Stylesライブラリに含まれていない基本的なボックス。グリッド上に描かれたコンテナは自動的にタイプblockが割り当てられますが、後で他のブロック要素に変更することも可能です。

  • HTML blocks - この要素を使ってコンポーネントにHTMLを追加する 。

  • Spacer - この要素を使って、ブロックやカード内の個々の要素間に垂直方向に拡張可能な隙間を作る。

Text elements

  • Paragraph - 見出しでないすべてのテキストおよびコピーに用いられる通常のテキスト要素。

  • Heading 1 - 文書のメイン見出し、最大の見出しに用いられます。

  • Heading 2 - 二階の海面。

  • Heading 3 - 三階見出し、よくタグラインに使われます。

  • Heading 4 - 複雑な文書のためのさらなる見出しレベル。

  • Heading 5 - 利用可能な最も深いヘディングレベル。

  • List items - 箇条書きで表示されるテキスト要素。

Inline elements

  • Link - この要素を使ってテキスト要素内のリンクを追加し、コンポーネントとウェブリンク間の関係を指定する。

  • Button - このクリック可能な要素を使ってユーザーとのやり取りを作成すること。

  • Badge - ステータスやタグやラベルなどの雑多な情報を表現するための非インタラクティブ要素。

  • Date - 日付を入力してください。この要素はバッジに作られたスタイルを再利用しています。

  • Variable - データマッピングを通じて動的データを表示するスタイルのないインライン要素。内容はテキストです。各変数には独自のフォールバックがあります。Variable要素は静的テキストと可変テキストを混ぜ合わせることを可能にします。例えば、Price: {price}USDやBy {author} in {category}。段落のテキストをマッピングすると、自動的に変数要素が作成されます。

外部部品

この記事を改善するための提案がある場合は、 お知らせください!