コンポーネントとは
コンポーネントは、プロジェクト内で繰り返し使用するデザイン要素を効率的に管理・再利用するための機能です。コンポーネント機能を活用することで、デザインの一貫性を保ちながら、効率的なウェブサイト制作が可能になります。
コンポーネントの主な特徴
再利用: 一度作成したコンポーネントを複数箇所に配置できます
一括編集: 1つのコンポーネントを編集すると、全ての配置箇所に自動反映されます
カスタマイズ: プロパティ機能を使用して、配置したコンポーネントパーツを個別にカスタマイズできます
コンポーネントの活用シーン
ヘッダー、フッター、ナビゲーションなど、サイト全体で使用する要素をコンポーネント化します。
変更が必要な部分のみをプロパティ化し、メンテナンス性を高めます。
コンポーネントの作成手順
コンポーネント化したい要素を選択します。
以下のいずれかの方法でコンポーネント化します：
右クリックメニューから「コンポーネント化」を選択
ショートカットキー ⌘＋J (Windowsでは Ctrl+J) を使用
コンポーネント名を入力します。
プロパティとして登録したいデータにチェックを入れます。
「コンポーネントを作成」をクリックします。
作成されたコンポーネントは、エディタ左側の追加パネル内コンポーネントタブに追加されます。
コンポーネントの配置と編集
コンポーネントを作成したら、プロジェクト内で活用しましょう。
コンポーネントの配置方法
エディタ左側の追加パネル内コンポーネントタブを開きます。
配置したいコンポーネントを選択し、以下のいずれかの方法で配置します：
ドラッグ＆ドロップでページ上に配置
クリックしてページ上に配置
コンポーネントの編集方法
下記手順でコンポーネントを編集できます。なお、プロパティ登録されている箇所は、編集モードに入らずに直接編集できます。
配置したコンポーネントを選択します
ダブルクリックして編集モードに入ります
編集モードでは以下の操作が可能です：
ボックスの追加
スタイルの編集
プロパティの追加・編集
コンポーネントのプロパティとは
プロパティを使用すると、同じコンポーネントでも個別にデータやデザインを変更できます。方法については、コンポーネントごとにデザインやデータの表示を変える方法をご覧ください。
プロパティの種類
STUDIOでは、以下6種類のプロパティを扱えます：
テキスト
画像
URL
数値
ブール値（オン・オフ）
カラー
プロパティの追加
コンポーネントをダブルクリックして編集モードに入ります。
「+」ボタンをクリックしてプロパティを追加します。
プロパティの種類と名前を設定します。
また、テキストや画像ボックスをコンポーネント内に追加すると、自動的にプロパティとして追加するオプションが表示されます。
プロパティ編集
コンポーネントを選択します
レイヤーパネルを開き、プロパティ管理欄を表示します
各プロパティの値を編集します
プロパティの紐付け
追加したプロパティの右横にある青い丸を選択します。
コネクタをドラッグし、対象のボックスに紐付けます。
Tips：数値プロパティは、パディングや横幅などのスタイルにも紐付けできますが、マージンや枠線には紐付けできません。
プロパティ名の編集とプロパティ削除
プロパティ名をクリックすると、プロパティ名の編集とプロパティの削除が選択できます。
コンポーネントの解除（デタッチ）
コンポーネントを通常のボックスとして扱いたい場合は、以下の手順で解除（デタッチ）できます。
解除したいコンポーネントを選択します。
ショートカットキー ⌘＋Shift＋J (Windowsでは Ctrl+Shift+J) を押します。
Tips：
デタッチ後は、コンポーネント化直前の状態で通常ボックスとして残ります。
元のコンポーネントや他に配置されているコンポーネントには影響しません。
コンポーネントの削除
プロジェクトからコンポーネントを完全に削除する場合は、以下の手順で行います。
コンポーネント一覧から削除したいコンポーネントを見つけます
コンポーネント名の右側にある「×」をクリックします
Tips：コンポーネントを削除すると、ページに配置されたそのコンポーネントは自動的に解除（デタッチ）され、通常のボックスとして残ります。
component