メインコンテンツにスキップ

コンポーネント

コンポーネントは、プロジェクト内で繰り返し使用するデザイン要素を共通パーツとして登録し、再利用や一括管理ができる機能です。この機能を活用することで、デザインの一貫性を保ちながら効率的なウェブサイト制作が可能になります。

昨日アップデートされました

コンポーネントとは

コンポーネントとして登録した要素は、「共通パーツ」としてプロジェクト内で再利用・一括管理できるようになります。コンポーネントに加えた編集は、同じコンポーネントを配置したすべての場所に自動で反映されますが、プロパティ機能を活用して個別にカスタマイズを加えることも可能です。

コンポーネントの主な特徴

  • 再利用: 一度作成したコンポーネントを複数箇所に配置できます。

  • 一括編集: 1つのコンポーネントを編集すると、全ての配置箇所に自動反映されます。

  • カスタマイズ: プロパティ機能を使用して、配置したコンポーネントパーツを個別にカスタマイズできます。

コンポーネントの活用シーン

サイト全体で使用する要素をコンポーネント化する:ヘッダー、フッター、ナビゲーションなど

コンポーネントを作成する

  1. コンポーネント化したい要素を選択します。

  2. 以下のいずれかの方法でコンポーネント化します:

    • 右クリックメニューから[コンポーネント化]を選択

    • ショートカットキー ⌘+J (Windowsでは Ctrl+J) を使用

  3. コンポーネント名を入力します。

  4. コンポーネントのプロパティとして登録したいデータにチェックを入れます。

  5. [コンポーネントを作成]をクリックします。

すくりーんしょっと:[コンポーネント化]をクリックした後に表示されるモーダル。

コンポーネントを確認する

コンポーネント化された要素は、コンポーネントパネルから確認できます。

  1. デザインエディタ左のナビゲーションから、コンポーネントアイコンを選択します。

  2. 左パネルで[コンポーネント]パネルが開き、作成済みのコンポーネントが一覧で表示されます。

コンポーネントを配置する

  1. デザインエディタ左のナビゲーションから、コンポーネントアイコンを選択します。

  2. 左パネルでコンポーネントパネルが開きます。

  3. 配置したいコンポーネントを選択し、以下のいずれかの方法でスクリーン上に配置します:

    • ドラッグ&ドロップで配置

    • クリックしで配置

スクリーンショット:デザインエディタの左側・ナビゲーションメニューからコンポーネントアイコンをクリックし、コンポーネントパネルが開いている様子。

コンポーネントを編集する

  1. スクリーン上のコンポーネントを選択します。

  2. コンポーネントをダブルクリックして編集モードにします。

  3. 編集モードでは次の操作が可能です。:

    • ボックスの追加・削除

    • レイアウト、外観、ポジションなどの編集

    • プロパティの追加・編集

プロパティとして登録されている箇所は、編集モードに入らずに直接編集できます。

コンポーネントの解除(デタッチ)

コンポーネントを通常のボックスとして扱いたい場合は、以下の手順でコンポーネント化を解除(デタッチ)できます。

  1. スクリーン上で対象のコンポーネントを選択します。

  2. ショートカットキー ⌘+Shift+J (Windowsでは Ctrl+Shift+J) で、コンポーネント化を解除します。

コンポーネントを解除すると、その要素はスクリーン上に通常のボックスとして残り、元のコンポーネント本体や他の配置箇所には影響しません。

スクリーンショット:コンポーネント解除が右クリックメニュー内にリストされている様子。

コンポーネントの削除

  1. デザインエディタ左のナビゲーションから、コンポーネントアイコン

    を選択します。

  2. 左パネルでコンポーネントパネルが開きます。

  3. コンポーネント一覧から削除したいコンポーネントを選択します。

  4. コンポーネント名の右側にある「×」をクリックして、削除します。

  5. コンポーネントを削除すると、ページに配置されたコンポーネントは自動的に解除(デタッチ)され、通常のボックスとして残ります。

コンポーネントでプロパティを活用する

通常、同一コンポーネントのデータやデザインを配置場所ごとに個別設定することはできませんが、プロパティを利用すると、配置箇所ごとにデータやデザインを切り替えられます。

component

こちらの回答で解決しましたか?