コンポーネントとは
コンポーネントとして登録した要素は、「共通パーツ」としてプロジェクト内で再利用・一括管理できるようになります。コンポーネントに加えた編集は、同じコンポーネントを配置したすべての場所に自動で反映されますが、プロパティ機能を活用して個別にカスタマイズを加えることも可能です。
コンポーネントの主な特徴
再利用: 一度作成したコンポーネントを複数箇所に配置できます。
一括編集: 1つのコンポーネントを編集すると、全ての配置箇所に自動反映されます。
カスタマイズ: プロパティ機能を使用して、配置したコンポーネントパーツを個別にカスタマイズできます。
コンポーネントの活用シーン
サイト全体で使用する要素をコンポーネント化する:ヘッダー、フッター、ナビゲーションなど
コンポーネントを作成する
コンポーネント化したい要素を選択します。
以下のいずれかの方法でコンポーネント化します:
右クリックメニューから[コンポーネント化]を選択
ショートカットキー ⌘+J (Windowsでは Ctrl+J) を使用
コンポーネント名を入力します。
コンポーネントのプロパティとして登録したいデータにチェックを入れます。
[コンポーネントを作成]をクリックします。
コンポーネントを確認する
コンポーネント化された要素は、コンポーネントパネルから確認できます。
デザインエディタ左のナビゲーションから、コンポーネントアイコン
を選択します。左パネルで[コンポーネント]パネルが開き、作成済みのコンポーネントが一覧で表示されます。
コンポーネントを配置する
デザインエディタ左のナビゲーションから、コンポーネントアイコン
を選択します。左パネルでコンポーネントパネルが開きます。
配置したいコンポーネントを選択し、以下のいずれかの方法でスクリーン上に配置します:
ドラッグ&ドロップで配置
クリックしで配置
コンポーネントを編集する
スクリーン上のコンポーネントを選択します。
コンポーネントをダブルクリックして編集モードにします。
編集モードでは次の操作が可能です。:
ボックスの追加・削除
レイアウト、外観、ポジションなどの編集
プロパティの追加・編集
プロパティとして登録されている箇所は、編集モードに入らずに直接編集できます。
コンポーネントの解除(デタッチ)
コンポーネントを通常のボックスとして扱いたい場合は、以下の手順でコンポーネント化を解除(デタッチ)できます。
スクリーン上で対象のコンポーネントを選択します。
ショートカットキー ⌘+Shift+J (Windowsでは Ctrl+Shift+J) で、コンポーネント化を解除します。
コンポーネントを解除すると、その要素はスクリーン上に通常のボックスとして残り、元のコンポーネント本体や他の配置箇所には影響しません。
コンポーネントの削除
デザインエディタ左のナビゲーションから、コンポーネントアイコン
を選択します。左パネルでコンポーネントパネルが開きます。
コンポーネント一覧から削除したいコンポーネントを選択します。
コンポーネント名の右側にある「×」をクリックして、削除します。
コンポーネントを削除すると、ページに配置されたコンポーネントは自動的に解除(デタッチ)され、通常のボックスとして残ります。
コンポーネントでプロパティを活用する
通常、同一コンポーネントのデータやデザインを配置場所ごとに個別設定することはできませんが、プロパティを利用すると、配置箇所ごとにデータやデザインを切り替えられます。
プロパティの概要や設定方法の詳細は、プロパティを活用して、同一コンポーネントのデータやデザインを配置箇所ごとに変えるをご覧ください。
component

![すくりーんしょっと:[コンポーネント化]をクリックした後に表示されるモーダル。](https://downloads.intercomcdn.com/i/o/xqogzym4/1891452176/66d8876ca0f3689800ced44c230f/image.png?expires=1766195100&signature=c32f5c17a3a84195e2f369475b1c304656330f1336a04073953ba32265303671&req=dSguF817n4BYX%2FMW1HO4zSwxIygFChVcqoixpE72myyiyZg1oG9Z9azjEIx%2B%0AmpSue8V6feFRr1LJYH8%3D%0A)

