> ## 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.

# ドラッグ＆ドロップエリアの概要

> ドラッグ＆ドロップエリアを使うと制作担当者はモジュールの配置、レイアウトの変更、コンテンツエディター内での一部のスタイル設定ができます。開発者が定義済みレイアウトを作成します。

ドラッグ&ドロップエリアを使用すると、制作担当者がコンテンツエディター内でモジュールの配置、レイアウトの変更、スタイルの追加を行うことができるページエリアとグローバルパーシャルを作成できます。ドラッグ＆ドロップエリアを使用すると、制作担当者が独自にレイアウトを作成できるので、作成するテンプレートの数を減らすことができます。

このページでは、`dnd_area`の利便性と概念について詳しく説明します。ビルドの準備ができたら、 [dnd\_area](/cms/start-building/building-blocks/drag-and-drop/tutorial)を使ってみると[dnd\_areaのリファレンスドキュメント](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas)をご参照ください。

<Warning>
  ### 注：

  [ブログ記事](/cms/start-building/building-blocks/templates/blog)と[Eメールテンプレート](/cms/start-building/building-blocks/templates/overview#email)でドラッグ＆ドロップエリアを使用することはできません。
</Warning>

## 制作担当者にとっての利便性

制作担当者がドラッグ＆ドロップエリアを含むテンプレートを使用してページを作成する際には、開発者がレイアウトに配置した定義済みモジュールを使用したページが最初に表示されます。この初期レイアウトは、このテンプレートを使用するページの外観のサンプルとなります。制作担当者はドラッグ＆ドロップエリアを使用して、次のようなページを作成できます。

* モジュール、セクション、行、列の追加。
* モジュールのサイズ変更、コンテンツとスタイルの更新（配置の調整や背景の追加など）。

小さな調整のために開発者の介入を必要とせずに、シンプルにページを変更できる豊富な柔軟性が得られます。

<Warning>
  ### 注：

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

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

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

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/drag-and-drop.gif" alt="ページエディターでのdnd_areas" />
</Frame>

の操作

## 開発者にとっての利便性

ドラッグ＆ドロップエリアを使用した開発は、一般的なCSSフレームワークとそのグリッドを使用することと似ています。まず最初にセクションと呼ばれるコンテナーを使用してページをレイアウトします。[セクション](/cms/start-building/building-blocks/sections/sections)に行が含まれています。行の内部はモジュールと列です。これらの[要素](#drag-and-drop-area-elements)の詳細については、以下をご覧ください。

ほとんど全てをテンプレートにハードコードすることもできますが、ドラッグ＆ドロップエリアを使用した開発の目標は、後で制作担当者が編集できるデフォルトのページコンテンツを作成することです。

`dnd_area`タグの使用例を確認するには、[HubSpotのCMSボイラープレートテンプレート](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates)をご参照ください。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/dnd%20coded.png" alt="dnd_areaVS Codeでコーディングされた" />
</Frame>

## ドラッグ＆ドロップエリアの要素

ドラッグ＆ドロップエリアを含むページを作成する場合は、次の要素を含めます。

* [**dnd\_area**](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#dnd-area)\*\*:\*\*コンテンツエディターでモジュールのドラッグ＆ドロップを可能にする最上位のドラッグ＆ドロップ要素。ドラッグ＆ドロップエリアをネストすることはできません。例えば、 `dnd_section`に`dnd_area`タグを含めることはできません。
* [**dnd\_section**](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#dnd-section): `dnd_area`内の最も外側のコンテナ。`dnd_row`、 `dnd_column`、 `dnd_module`を含めることができます。他のドラッグ＆ドロップ要素の中に`dnd_section`をネストすることはできません。
* [**dnd\_column**](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#dnd-column): `dnd_row`を含めることができます。`dnd_row`内に複数の列がある場合、行の内容は水平方向に揃えられます。
* [dnd\_row](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#dnd-row): `dnd_module`と`dnd_column`を含めることができます。
* [dnd\_module](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#dnd-module): モジュールのレイアウト、スタイル、コンテンツを追加できるモジュールラッパー。

これらのタグの詳細については、以下をご覧ください。また、実践的なアプローチとして、[ドラッグ＆ドロップエリアを使ってみる](/cms/start-building/building-blocks/drag-and-drop/tutorial)も確認しておくとよいでしょう。

<Frame>
  <img src="https://www.hubspot.jp/hubfs/Drag%20and%20Drop%20relationships.png" alt="ドラッグ＆ドロップ要素の関係" />
</Frame>

下の図は、さまざまなドラッグ＆ドロップ要素の階層をさらに細分化したものです。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/Example%20structure.png" alt="構造の例" />
</Frame>

ドラッグ＆ドロップエリアを可視化する方法に関する動画チュートリアルについては、以下の動画（英語）をご覧ください。

<iframe src="https://www.youtube.com/embed/RUs24n8DfzA" allowfullscreen="false" style="max-width: 560px; max-height: 315px" />

このまま読み進めて、ドラッグ＆ドロップのセクション、行、列、モジュールの詳細をご確認ください。

### セクション

セクションは、 [`dnd_section`](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-)タグを使用して作成される特殊なタイプの行です。これは`dnd_area`の直接の子にすることができる唯一のドラッグ＆ドロップ要素です。セクションは外側のラッピングコンテナーと考えることができます。コンテンツは全幅に広げることも、中央で最大幅制限を持たせることもできます。セクションは列とモジュールを囲むので、コンテンツの大部分を簡単に再配置して実装できます。`dnd_section`タグはHTML`<section>`要素をレンダリングしません。

以下は、ページエディターでのセクションの表示方法を示したスクリーンショットです。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/Section%20in%20page%20editor.png" alt="ページエディターでのセクション" />
</Frame>

`dnd_section`タグに加えて、 [セクションテンプレート](/cms/start-building/building-blocks/sections/sections#create-reusable-sections)を作成することもできます。これは、このページエディターで制作担当者がアクセスできる事前定義された再利用可能なセクションです。例えば、上のスクリーンショットに示されているセクションをセクションテンプレートとして作成することができます。制作担当者は作成したテンプレートを必要に応じてページに素早く追加することができます。再利用可能なセクションには固有の機能があり、例えば、標準のhubLパーシャルテンプレートのように使用できます。

### 列

列は行とモジュールのラッパーであり、行またはセクション内に配置できます。列は[`dnd_column`](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-column-code-dnd-column-code-)タグを使用して作成します。

行内の複数の列を使用して、水平方向に行とモジュールを配置します。

列は行を含めることができる垂直方向の領域です。幅を変更することで、異なるサイズの列を作成できます。行のサイズが12「列」幅だという場合、これはCSSグリッドを指します。行内の列は12以下ならどんなサイズにもできますが、12を超えて追加することはできません。

複数行を列に配置すると、それらの行内のモジュールは垂直方向に積み重なって表示されます。モジュールは列自体であるため、モジュールを列の直接の子にすることはできません。モジュールは行内に含める必要があります。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/dnd_area%20column%20in%20page%20editor.png" alt="ページエディターでのdnd_area列" />
</Frame>

ページエディターでの列の表示。

### 行

行は列のラッパーです。行は[`dnd_row`](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-row-code-dnd-row-code-)タグを使用してテンプレート内に作成します。モジュールは、行内に直接配置できる列です。これにより、モジュールは水平方向に隣り合って表示されます。

モジュールを行内に配置することにより、垂直方向に整理できます。モジュールを他のモジュールの上に配置する場合は、そのモジュールを行内に配置します。次に、最初の行の上または下の行内に別のモジュールを追加します。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/dnd_area%20row%20in%20page%20editor.png" alt="ページエディターでのdnd_area行" />
</Frame>

ページエディターでの行の表示。

### モジュール

[モジュール](/cms/start-building/building-blocks/modules/overview)はCMS Hubの基本パーツであり、サイトにまとめてコンテンツを表示するために使用する再利用可能な構築要素として機能します。テンプレートを作成するとき、[`dnd_module`](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-module-code-dnd-module-code-)タグを使用してドラッグ＆ドロップ行内およびセクション内にモジュールを配置します。モジュールは列でもあります。つまり、2つのモジュールタグを配置するか、モジュールと列を直接隣に配置すると、それらは水平方向に並べて表示されます。

ドラッグ＆ドロップ要素をモジュール内に配置することはできません。モジュールを[`dnd_area`](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-)の直接の子にすることはできません。

## HTML構造とスタイル設定

ドラッグ＆ドロップエリアとその要素がレンダリングされるときには、ブートストラップ2に基づいて12列グリッドのクラス名になります。簡単に実行できるようにするには、[HubSpot CMS Boilerplate](https://github.com/HubSpot/cms-theme-boilerplate/)の[\_layout.css](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/objects/_layout.css)ファイルを使用できます。これはそのクラス名のデフォルトのスタイルを提供します。

このスタイルシートを使用する必要はなく、代わりに独自のスタイルを提供できます。CMSテーマボイラープレートに基づいてサイトを構築していて独自のCSSを使用する場合は、[base.htmlで呼び出されないようにlayout.cssを削除](https://github.com/HubSpot/cms-theme-boilerplate/blob/5abaf2a4c45a95dbed1d459f7f0f6407350752ac/src/templates/layouts/base.html#L8)するとよいでしょう。独自のCSSグリッドを使用するには同じグリッドクラス名をターゲットにする必要がありますが、スタイルは自由に設定できます。

ドラッグ＆ドロップエリアは、レンダリングされるときにページエディターで使用されるクラスを使用するdivを作成します。例えば、`widget-span`や`widget-type-cell`などです。これらのクラスはページエディターで使用されるので直接ターゲットにするべきではありませんが、後で変更することはできます。

代わりに、使用するクラス名を使うクラスパラメーターを[`dnd_area`](https://developers.hubspot.jp/docs/reference/cms/hubl/tags/dnd-areas#drag-and-drop-area-code-dnd-area-code-)にHubLが追加します。

```html theme={null}
<div class="container-fluid my-custom-class">
  <div class="row-fluid-wrapper">
    <div class="row-fluid">
      <div class="span12 widget-span widget-type-cell" style="" data-widget-type="cell" data-x="0" data-w="12"></div>
      <!--end widget-span -->
    </div>
  </div>
</div>
```

### 制作担当者と属性スタイル設定

ドラッグ＆ドロップエリアで制作担当者はページのスタイルにエフェクトを付けることができます。例えば、セクションに背景を設定できます。開発者は、属性によって設定のデフォルト値を渡すことができます。

ページが実際にレンダリングされるとき、この設定に基づいて生成されるスタイルが`standard_header_includes`に追加されます。

## フレキシブルカラムの移行

フレキシブルカラムで構築されたテンプレートを変更してドラッグ＆ドロップエリアを使用する場合は、フレキシブルカラムについて次の点に注意してください。

フレキシブルカラムはドラッグ＆ドロップエリアと同じではありません。フレキシブルカラムのみを持つテンプレートをドラッグ＆ドロップエリアのみを持つテンプレートに交換することはできません。この制限が設けられていたのは、コンテンツがフレキシブル列からドラッグ＆ドロップエリアにマッピングされないためです。この理由を考えてみましょう。新しいテンプレートを作成してサイドバーとメインのコンテンツエリアを設定したとします。サイドバーはフレキシブルカラムで、メインコンテンツはドラッグ＆ドロップエリアです。交換ツールはフレキシブルカラム同士をマッピングしようとします。

[ドラッグ＆ドロップエリアの既存ウェブサイトへの追加](https://developers.hubspot.jp/docs/guides/cms/improve-older-sites/add-theme-features-to-existing-sites#drag-and-drop-areas)の詳細についてご確認ください。

## 関連コンテンツ

* [ドラッグ＆ドロップエリアの既存ウェブサイトへの追加](https://developers.hubspot.jp/docs/guides/cms/improve-older-sites/add-theme-features-to-existing-sites#drag-and-drop-areas)
* [ドロップエリアの作成](/cms/start-building/building-blocks/drag-and-drop/tutorial)
* [ドラッグ＆ドロップエリアの解説 - YouTube動画](https://www.youtube.com/watch?v=RUs24n8DfzA\&feature=youtu.be)