> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# ドラッグ＆ドロップエリアを作成する

> ドラッグ＆ドロップエリアを使用して、制作担当者が簡単にレイアウト、スタイル、コンテンツを変更できるようにサポートします。

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "サポートされる製品",
    description: "次のいずれかの製品またはそれ以上が必要です。",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "無料ツール",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="サポートされる製品" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="professional" />
</Accordion>

[ドラッグ＆ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)は、ページエディターから直接変更できる空のコンテナーとして機能するテンプレート内のセクションです。ドラッグ＆ドロップエリアをテンプレート内に組み込むことで、制作担当者はテンプレートに組み込まれた静的モジュールに頼るのではなく、必要に応じてページエディター内でモジュールを追加、管理できるようになります。

<Frame>
  <img src="https://newinboundblog.hubspot.com/hubfs/a%20new%20approach.gif" alt="モジュールをページにドラッグして列と行を調整する様子を示すアニメーション" />
</Frame>

制作担当者はドラッグ＆ドロップエリアを空のドロップ領域として使用できるだけでなく、開始点として機能するさまざまなモジュール、レイアウト、コンテンツをドラッグ＆ドロップエリアに事前に配置することもできます。

このチュートリアルでは、簡単なドラッグ＆ドロップエリアの設定について説明します。ドラッグ＆ドロップエリアの開発者向けリソースについては、実装のベストプラクティスとしての[ボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html)（英語）と、[ドラッグ＆ドロップエリアHubLタグのリファレンスドキュメント](/cms/reference/hubl/tags/dnd-areas)をご覧ください。

<Warning>
  **注**: コンテンツ制作担当者は、テンプレートで「[dnd\_area](/cms/reference/hubl/tags/dnd-areas)」タグが使用されているかどうかに応じて、ページのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。

  * ビジュアル レイアウト エディター上で作成したドラッグ＆ドロップテンプレートは、「*dnd\_area*」タグの有無に関係なく、他のドラッグ＆ドロップテンプレートまたはコードテンプレートと入れ替えることができます。
  * 「*dnd\_area*」タグが使用されているコードテンプレートは、「*dnd\_area*」タグが使用されている他のコードテンプレートとのみ入れ替えることができます。
  * 「*dnd\_area*」タグが使用されていないコードテンプレートは、「*dnd\_area*」タグが使用されていない他のコードテンプレートとのみ入れ替えることができます。

  ページのテンプレートが入れ替わっても、最初のテンプレートのドラッグ＆ドロップエリアに追加した既存のコンテンツは保持されます。
</Warning>

<Steps>
  <Step title="新規HTMLテンプレートを作成する">
    新しいHTMLテンプレートを作成して、ドラッグ＆ドロップセクションのHubLおよびHTMLを含めます。

    <Info>
      ドラッグ＆ドロップエリアは、12列のレスポンシブグリッドを基盤としています。ドラッグ＆ドロップタグでは、列と行を指定するクラス名を指定して、マークアップをレンダリングします。これらのクラス名をターゲットとするスタイルシートは、開発者が追加する必要があります。実装可能なレイアウトスタイルの例については、[HubSpotのCMSボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css)（英語）を参照してください。スタイルシートをテンプレートに追加するには、[`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css)を使用します。
    </Info>
  </Step>

  <Step title="ドラッグ＆ドロップエリアを作成する">
    `dnd_area`は、ウェブページの一部の構造、デザイン、およびコンテンツを編集可能にするためのコンテナーです。ドラッグ＆ドロップエリアのデフォルトのコンテンツは、`dnd_area`タグの本文として提供します。

    このタグ自体によって、制作担当者がモジュールをコンテンツ制作ツール内にドラッグするためのドロップ領域が生成されます。

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
    	<!-- generates an empty drag and drop area drop-section -->
    {% end_dnd_area %}
    ```
  </Step>

  <Step title="モジュールでセクションを作成する">
    `dnd_section`は最上位の行であり、常に`dnd_area`の直接の子でなければなりません。セクションでは、制作担当者がコンテンツ制作ツール内のセクションに指定するスタイルのデフォルト値を制御するさまざまなパラメーターがサポートされます。

    例として、次のコードでは背景画像（`background_image`）を含むセクションを作成します。このセクションは`vertical-alignment`パラメーターを基準に中央に配置し、子コンテンツのフィールドの最大幅を`1000px`に設定しています。ドラッグ＆ドロップのHubLタグでサポートされる全てのパラメーターについては、[ドラッグ＆ドロップエリアのHubLタグ](https://developers.hubspot.jp/beta-docs/reference/cms/hubl/tags/dnd-areas)に関する資料をご参照ください。

    セクションのコンテンツを事前に配置しておくために、コードにはパスを参照してモジュールを組み込む`dnd_module`タグも含まれています。この例では、`path`パラメーターで設定されているHubSpotのデフォルトのリッチ テキスト モジュールを`dnd_module`で取り込んでいます。リッチ テキスト モジュールのデフォルト値は、`module_attribute`タグを使用して指定します。

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
        {% dnd_section
            background_image = {
                'backgroundPosition': 'MIDDLE_CENTER',
                'backgroundSize': 'cover',
                'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
              },
              max_width=1000,
              vertical_alignment='MIDDLE'
        %}
            {% dnd_module path='@hubspot/rich_text' %}
                {% module_attribute "html"%}
                    This is your main headline.
                    Use this space to tell everyone about what you have to offer.
                {% end_module_attribute %}
            {% end_dnd_module %}
        {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    結果として、制作担当者がコンテンツエディター内で編集できるモジュールを含むドラッグ＆ドロップエリアになります。`dnd_section`に`max_width`を設定する場合、コンテンツにどのような影響があるかにご注意ください。

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_text.png" alt="モジュールツールバーが表示されたページエディターのスクリーンショット" />
    </Frame>
  </Step>

  <Step title="複数のモジュールを含める">
    複数のモジュールを含めるには、複数の`dnd_module`タグを使用します。12列グリッドに基づく`offset`および`width`パラメーターを設定することで、以下のようにリッチ テキスト モジュールの横に画像モジュールを配置できます。

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
        {% dnd_section
            background_image={
                'backgroundPosition': 'MIDDLE_CENTER',
                'backgroundSize': 'cover',
                'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
            },
            max_width=1000,
            vertical_alignment='MIDDLE'
        %}
            {% dnd_module path='@hubspot/rich_text', width=8, offset=0, label="Rich Text" %}
                {% module_attribute "html"%}
                	<h1>This is your main headline.</h1>

    Use this space to tell everyone about what you have to offer.
                {% end_module_attribute %}
            {% end_dnd_module %}
            {% dnd_module path='@hubspot/linked_image',
              width=4,
              offset=8,
              img={
                "src": "https://www.dragndrop.com/placeholder-image.jpg",
                "alt": "Stock placeholder image"
              }
            %}
            {% end_dnd_module %}
        {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    また、ページには編集可能な画像モジュールとドラッグハンドルも用意されているため、制作担当者がモジュールの幅とオフセットを変更できます。`dnd_section`に`vertical_alignment`を設定すると、コンテンツが垂直方向の中央に配置される点にご注意ください。

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_rich_image.png" alt="セクションに追加された画像モジュールを表示するページエディターのスクリーンショット" />
    </Frame>
  </Step>

  <Step title="列と行を組み込む">
    ドラッグ＆ドロップエリアをさらに細かく設定するには、`dnd_row`タグと`dnd_column`タグを使用して行と列を組み込むことができます。行と列はコンテンツエディターのセクションと同様に機能します。制作担当者は行と列をドラッグして操作し、複製、削除、スタイル設定を行うことも可能です。

    ```hubl theme={null}
    {% dnd_area "body_dnd_area" %}
      {% dnd_section
        background_image={
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://www.dragndrop.com/bg-image.jpg'
        },
        max_width=1000,
        vertical_alignment='MIDDLE'
      %}
        {% dnd_module path='@hubspot/linked_image',
          width=6,
          img={
            "src": "https://www.dragndrop.com/placeholder-image.jpg",
            "alt": "Stock placeholder image"
          }
        %}
        {% end_dnd_module %}
        {% dnd_column width=6, offset=6 %}
          {% dnd_row
            padding={
                'bottom': 15
            }
          %}
            {% dnd_module path='@hubspot/rich_text' %}
              {% module_attribute "html"%}
                  <h1>This is your main headline.</h1>

    Use this space to tell everyone about what you have to offer.
              {% end_module_attribute %}
            {% end_dnd_module %}
          {% end_dnd_row %}
          {% dnd_row %}
            {% dnd_module path='@hubspot/form' %}
            {% end_dnd_module %}
          {% end_dnd_row %}
        {% end_dnd_column %}
      {% end_dnd_section %}
    {% end_dnd_area %}
    ```

    これで制作担当者は、モジュールやセクションに加えて、特定の行や列に対するスタイル設定とレイアウト制御ができるようになりました。

    <Frame>
      <img src="https://newinboundblog.hubspot.com/hubfs/dnd_area_full.png" alt="2列の行を表示するページエディターのスクリーンショット。左側に画像モジュール、右側にリッチ テキスト モジュールとフォームモジュール" />
    </Frame>
  </Step>

  <Step title="ドラッグ＆ドロップコンポーネントの汎用スタイルを設定する">
    ドラッグ＆ドロップエリア、セクション、列、行、モジュールのさまざまなコンポーネント全てには、CSSを使用してスタイル設定できるクラスがあります。これらのコンポーネントの編集可能なスタイルとオプションは、HubLではなくCSSを使用して設定できます。例えば、デフォルトのパディングはCSSで`dnd_sections`に設定できます。

    ```css theme={null}
    .dnd-section {
      padding: 80px 20px;
    }
    ```

    ドラッグ＆ドロップ エリア コンポーネントの汎用CSSセレクターは、`.dnd-section`、`.dnd-column`、`.dnd-row`、および`.dnd-module`です。これらの`dnd`プレフィックスが付いたクラス以外、マークアップの実際のグリッドクラス名はブートストラップ2の名前に基づいています。これは、ドラッグ＆ドロップでブートストラップ2を使用する必要があることを意味するわけではありません。ページに`dnd_area`を追加する場合、開発者には、グリッドが機能するようなスタイルを指定する責任があります。実装可能なレイアウトスタイルの例については、[HubSpotのCMSボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/css/objects)（英語）をご参照ください。スタイルシートをテンプレートに追加するには、[`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css)を使用します。
  </Step>
</Steps>

## 関連チュートリアル

* [テーマを使ってみる](/cms/start-building/building-blocks/themes/getting-started)
* [カスタムモジュールを使ってみる](/cms/start-building/building-blocks/modules/overview)
* [テーマ機能を既存のサイトに追加する方法](/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)