> ## 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. # ドラッグ＆ドロップエリアのHubLタグ > このHubLタグは、ドラッグ＆ドロップエリアの作成に使用します。開発者はこれらのタグを使用して、コンテンツエディター内でレイアウト、スタイル、コンテンツを直接変更できる、ページ内のセクションを作成できます。 [ドラッグ＆ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)を使用することで、開発者はコンテンツエディター内でレイアウト、スタイル、コンテンツを直接変更できる、ページ内のセクションとグローバルパーシャルを作成できます。ドラッグ＆ドロップエリアのセットアップ手順については、[ドラッグ＆ドロップエリアの作成チュートリアル](/cms/start-building/building-blocks/drag-and-drop/tutorial)をご覧ください。 ドラッグ＆ドロップエリアは、12列のレスポンシブグリッドを基盤としています。ドラッグ＆ドロップタグでは、列と行を指定するクラス名を指定して、マークアップをレンダリングします。そのようなクラス名を対象とするスタイルシートを追加する必要があります。実装可能なレイアウトスタイルの例については、[HubSpotのCMSボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/master/src/css/objects/_layout.css)（英語）を参照してください。スタイルシートをテンプレートに追加するには、[`{{ require_css() }}`](/cms/reference/hubl/tags/standard-tags#require-css)を使用します。 \*\*注：\*\*現時点では、[ブログ記事](/cms/start-building/building-blocks/templates/blog)と[Eメールテンプレート](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#email)でドラッグ＆ドロップエリアを使用することはできません。 ## dnd\_area [ドラッグ＆ドロップエリア](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview)は、ウェブページの一部の構造、デザイン、コンテンツを編集可能にするためのコンテナーです。ドラッグ＆ドロップエリアの既定のコンテンツは、`{% dnd_area %}`タグの本文として提供します。 モジュール自体にドラッグ＆ドロップエリアを含めることはできません。モジュールへの追加コンテンツを統一するインターフェイスを制作担当者に提供するには、[繰り返し可能なフィールドとグループ](/cms/reference/fields/module-theme-fields#repeaters)を代わりに使用してください。 `dnd_area`タグには、以下のパラメーターを指定することができます。 | パラメーター | タイプ | 説明 | | ------- | --- | -------------------------- | | `class` | 文字列 | dnd\_areaを囲むdivに追加するクラス。 | | `label` | 文字列 | エディター上のサイドバーのラベルとして使用されます。 | ```text 入力.txt theme={null} {% dnd_area "unique_name", class="main" %} {% end_dnd_area %} ``` ```text 出力.txt theme={null}
``` `dnd_area`タグには、`dnd_section`タグを含めることもできます。 \*\*注：\*\*コンテンツ制作担当者は、テンプレートで「[dnd\_area](/cms/reference/hubl/tags/dnd-areas)」タグが使用されているかどうかに応じて、ページのテンプレートを同じタイプの別のテンプレートと入れ替えることができます。 * ビジュアルドラッグ＆ドロップ レイアウト エディター上で作成したテンプレートは、「`dnd_area`」タグの有無に関係なく、他のドラッグ＆ドロップテンプレートまたはコードテンプレートと入れ替えることができます。 * 「*dnd\_area*」タグが使用されているコードテンプレートは、「`dnd_area`」タグが使用されている他のコードテンプレートとのみ入れ替えることができます。 * 「`dnd_area`」タグが使用されていないコードテンプレートは、「`dnd_area`」タグが使用されていない他のコードテンプレートとのみ入れ替えることができます。 ## dnd\_section [`{% dnd_section %}`](/cms/start-building/building-blocks/sections/sections)は、最上位の行で、`{% dnd_area %}`タグ内にネストする必要があります。[セクションはテンプレートとして定義](/cms/start-building/building-blocks/sections/sections#section-templates)してから、`dnd_area`に[含める](/cms/start-building/building-blocks/sections/sections#section-context)こともできるため、テンプレートの迅速な作成に最適です。 `dnd_section`タグには、以下のパラメーターを指定することができます。 | パラメーター | タイプ | 説明 | | ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `background_color` | ディクショナリー | [背景色](#background-color)の指定に使用するディクショナリー。文字列としても指定できます。 | | `background_image` | ディクショナリー | [背景画像](#background-image)の指定に使用するディクショナリー。 | | `background_linear_gradient` | ディクショナリー | [線形グラデーションの背景](#background-linear-gradient)の指定に使用するディクショナリー。 | | `full_width` | ブール値 | セクションを全幅にするか、または内側のコンテナーの幅によって制限するかを指定するブール値。 | | `margin` | ディクショナリー | `cm`、`mm`、`Q`、`in`、`pc`、`pt`、`px`、`em`、`ex`、`ch`、`rem`、`lh`、`vw`、`vh`、`vmin`、`vmax`、`%`でのマージン値の指定に使用するディクショナリー。単位を指定しない場合、既定の`px`が適用されます。 | | `max_width` | 整数 | ラッピングディクショナリーでコンテンツの最大幅を設定するピクセル値。 | | `padding` | ディクショナリー | `cm`、`mm`、`Q`、`in`、`pc`、`pt`、`px`、`em`、`ex`、`ch`、`rem`、`lh`、`vw`、`vh`、`vmin`、`vmax`、`%`でのパディング値の指定に使用するディクショナリー。単位を指定しない場合、既定の`px`が適用されます。 | | `vertical_alignment` | 文字列 | 子コンテンツの垂直方向の位置合わせ。使用可能なオプションには、以下のものがあります。
| **注：**`dnd_section`タグあたり1つのbackgroundパラメーターのみ使用できます。 ```text 入力.txt theme={null} {% dnd_section background_image={ "backgroundPosition": "MIDDLE_CENTER", "backgroundSize": "cover", "imageUrl": "https://example.com/path/to/image.jpg" }, margin={ "top": 32, "bottom": 32 }, padding={ "top": "1em", "bottom": "1em", "left": "1em", "right": "1em" }, max_width=1200, vertical_alignment="MIDDLE" %} {% end_dnd_section %} ``` ```text 出力.txt theme={null}
``` `dnd_section`dnd\_sectionタグには、以下のタグも含めることができます。 * `dnd_column` * `dnd_module` ## dnd\_column [`{% dnd_column %}`](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview#column)は、垂直方向の構成要素であり、親の行で定義された1つ以上のレイアウト列を占めます。 このHubLタグは、`{% dnd_area %}`タグ内にネストする必要があります。 `dnd_column`タグには、以下のパラメーターを指定することができます。 | パラメーター | タイプ | 説明 | | ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `background_color` | ディクショナリー | [背景色](#background-color)の指定に使用するディクショナリー。 | | `background_image` | ディクショナリー | [背景画像](#background-image)の指定に使用するディクショナリー。 | | `background_linear_gradient` | ディクショナリー | [線形グラデーションの背景](#background-linear-gradient)の指定に使用するディクショナリー。 | | `margin` | ディクショナリー | `cm`、`mm`、`Q`、`in`、`pc`、`pt`、`px`、`em`、`ex`、`ch`、`rem`、`lh`、`vw`、`vh`、`vmin`、`vmax`、`%`でのマージン値の指定に使用するディクショナリー。単位を指定しない場合、既定の`px`が適用されます。 | | `max_width` | 整数 | ラッピングディクショナリーでコンテンツの最大幅を設定するピクセル値。 | | `padding` | ディクショナリー | `cm`、`mm`、`Q`、`in`、`pc`、`pt`、`px`、`em`、`ex`、`ch`、`rem`、`lh`、`vw`、`vh`、`vmin`、`vmax`、`%`でのパディング値の指定に使用するディクショナリー。単位を指定しない場合、既定の`px`が適用されます。 | | `vertical_alignment` | 文字列 | 子コンテンツの垂直方向の位置合わせ。使用可能なオプションには、以下のものがあります。
| **注：**`dnd_column`タグあたり1つのbackgroundパラメーターのみ使用できます。 ```text 入力.txt theme={null} {% dnd_column offset=0, width=12, background_color={ r: 255, g: 0, b: 0, a: 1 }, margin={ "top": "1em", "bottom": "1em" }, %} {% end_dnd_column %} ``` ```text 出力.txt theme={null}
``` `dnd_column`タグには、`dnd_row`を含めることもできます。 ## dnd\_row [`{% dnd_row %}`](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview#row)は横方向の構成要素であり、列とモジュールを配置できる、ネストされた12列レイアウトのグリッドを作成します。 このHubLタグは、`{% dnd_area %}`タグ内にネストする必要があります。 `dnd_row`タグには、以下のパラメーターを含めることができます。 | パラメーター | タイプ | 説明 | | ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `background_color` | ディクショナリー | [背景色](#background-color)の指定に使用するディクショナリー。 | | `background_image` | ディクショナリー | [背景画像](#background-image)の指定に使用するディクショナリー。 | | `background_linear_gradient` | ディクショナリー | [線形グラデーションの背景](#background-linear-gradient)の指定に使用するディクショナリー。 | | `margin` | ディクショナリー | `cm`、`mm`、`Q`、`in`、`pc`、`pt`、`px`、`em`、`ex`、`ch`、`rem`、`lh`、`vw`、`vh`、`vmin`、`vmax`、`%`でのマージン値の指定に使用するディクショナリー。単位を指定しない場合、既定の`px`が適用されます。 | | `max_width` | 整数 | ラッピングディクショナリーでコンテンツの最大幅を設定するピクセル値。 | | `padding` | ディクショナリー | `cm`、`mm`、`Q`、`in`、`pc`、`pt`、`px`、`em`、`ex`、`ch`、`rem`、`lh`、`vw`、`vh`、`vmin`、`vmax`、`%`でのパディング値の指定に使用するディクショナリー。単位を指定しない場合、既定の`px`が適用されます。 | | `vertical_alignment` | 文字列 | 子コンテンツの垂直方向の位置合わせ。使用可能なオプションには、以下のものがあります。
| **注：**`dnd_row`タグあたり1つのbackgroundパラメーターのみ使用できます。 ```text 入力.txt theme={null} {% dnd_row background_color={ r: 123, g: 123, b: 123, a: 1.0 }, margin={ "top": 20, "bottom": 200 }, padding={ "top": 20, "bottom": 200, "left": 20, "right": 20 } %} {% end_dnd_row %} ``` ```text 出力.txt theme={null}
``` dnd\_rowタグには、以下のタグも含めることができます。 * `dnd_column` * `dnd_module` ## dnd\_module [`{% dnd_module %}`](https://developers.hubspot.jp/docs/guides/cms/content/templates/drag-and-drop/overview#module)は、div内に囲まれた[モジュール](https://developers.hubspot.jp/docs/guides/cms/content/modules/overview)であり、レイアウト、スタイル、コンテンツを追加できます。このモジュールを指定するには、そのパスを参照します。HubSpotの既定のモジュールを指定することも（`@hubspot/`/名前空間を使用）、独自に作成したモジュールを、デザインマネージャーのファイルツリー内のパスで指定することもできます。 このHubLタグは、`{% dnd_area %}`タグ内にネストする必要があります。 `dnd_module`タグには、以下のパラメーターを指定することができます。 | パラメーター | タイプ | 説明 | | ---------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `path` | 文字列 | モジュールへのパス | | `horizontal_alignment` | 文字列 | 横方向の位置。値`LEFT`、`CENTER`、`RIGHT`を使用できます。 | | `offset` | 整数 | 12列グリッド上での位置を示す0からの値。 | | `width` | 整数 | 12列グリッドを占めるカラムの数。 | | `flexbox_positioning` | 文字列 | \*\*推奨されません。使用しないでください。\*\*代わりに、`horizontal_alignment`を行やセクションの`vertical_alignment`を併せて使用します。
モジュールのフレックスボックスの位置。垂直方向の位置、次に水平方向の位置を示す以下の文字列に対応しています。 | 上記の`dnd_module`パラメーターのいずれかに一致するフィールド名がある古いモジュールを使用していますか？フィールドグループの場合と同様に、[fieldsパラメーターを使用して既定値を渡す](/cms/reference/modules/using-modules-in-templates#passing-fields-that-have-dnd-associated-parameters)ことができます。 ```text 入力.txt theme={null} {% dnd_module path="@hubspot/rich_text", offset=0, width=8, %} {% module_attribute "html" %}

Hello, world!

{% end_module_attribute %} {% end_dnd_module %} ``` ```text 出力.txt theme={null}

Hello, world!
``` ## 背景 列、セクション、行のdnd要素に背景を設定するには、[`background_image`](#background-image)、[`background_linear_gradient`](#background-linear-gradient)、[`background_color`](#background-color)を使用できます。 ### background\_color 列、セクション、行のdndタグは、背景色をサポートしています。ドラッグ＆ドロップ要素の既定の背景色を設定するには、`background_color`パラメーターを使用します。これは文字列のパラメーターであり、以下の例に示されている形式を含めることができます。 ```hubl theme={null} {% dnd_section %} // Hex Value (both 3 and 6 char length) {% dnd_column background_color="#F7F7F7" %} {% end_dnd_column %} {% dnd_column background_color="#FFF" %} {% end_dnd_column %} // Both RGB and RGBA {% dnd_column background_color="rgb(255,255,255)" %} {% end_dnd_column %} {% dnd_column background_color="rgba(0,0,0,.25)" %} {% end_dnd_column %} {% end_dnd_section %} ``` ### background\_linear\_gradient 列、セクション、行のdnd要素は、背景の線形グラデーションをサポートしています。既定のグラデーションを設定するには、`background_linear_gradient`パラメーターを使用します。このパラメーターで想定される値はディクショナリーです。現時点でサポートされるのは色の開始点と終了点のみです。 | パラメーター | タイプ | 説明 | | ----------- | ----- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `direction` | 文字列 | グラデーションの方向を設定します。 | | `colors` | array | 色を表す文字列の配列。現在、始点と終点を示す2つの値をサポートしています。値は、以下の形式の文字列として指定します。 | ```hubl theme={null} {% dnd_section background_linear_gradient={ "direction": "to bottom", "colors": [ "#1EB6C3", "#2A2859" ] } %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %} ``` ### background\_image 列、セクション、および行のdnd要素は、背景画像をサポートしています。既定の背景画像を指定するには、`background_image`パラメーターを使用します。このパラメーターで想定される値はディクショナリーです。 | キー | 型 | 説明 | | -------------------- | --- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `backgroundPosition` | 文字列 | 画像の背景位置。最初に垂直方向、次に水平方向の位置を示す文字列をサポートしています。 | | `backgroundSize` | 文字列 | 画像に使用されるCSS背景サイズのプロパティー。
サポートされる値： | | `imageUrl` | 文字列 | 画像への絶対URL。 | ```hubl theme={null} {% dnd_section background_image = { "backgroundPosition": "MIDDLE_CENTER", "backgroundSize": "cover", "imageUrl": "https://www.example.com/bg-image.jpg" }, %} {% dnd_module path="@hubspot/rich_text" width="6" %} {% end_dnd_module %} {% end_dnd_section %} ``` ## dndのスタイルパラメーターからページへの変換方法 [背景](#background)、マージン、パディングなど、スタイルのパラメーターを使用した場合、クラス名はセクション、列、行、モジュールに基づいて自動的に割り出されます。割り当てたプロパティー値は、自動的に作成されたクラス名に追加され、その後生成されたCSSコードがページ内の``終了タグの前にある`