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

# テーマのレスポンシブブレークポイント

> テーマの設定で、レスポンシブブレークポイントを作成する方法を説明します。

## テーマでのブレークポイントの定義

`responsive_breakpoints`オブジェクトをthemes.jsonファイルに追加することで、テーマにブレークポイントを設定できます。このオブジェクトには、ブレークポイントに関する情報が格納されるキーと値のさまざまなペアがあります。

```json theme={null}
// themes.json
{
  "label": "My Theme",
  "preview_path": "./path/to/preview.html",
  "screenshot_path": "./images/template-previews/home.png",
  "responsive_breakpoints": [
    {
      "name": "mobile",
      "mediaQuery": "@media (max-width: 767px)",
      "previewWidth": {
        "value": 520
      }
    }
  ]
}
```

これらのキーと値のペアの詳細については、以下の表を参照してください。

| キー             | 型              | 説明                                                                            |
| -------------- | -------------- | ----------------------------------------------------------------------------- |
| `name`         | String         | ブレークポイントの名前。現時点では`"mobile"`のみ利用できます。                                          |
| `mediaQuery`   | String         | レンダラー／エディターによって、レスポンシブCSSの生成に使用されるメディアクエリー文字列。例：`"@media (max-width: 767px)"` |
| `previewWidth` | Key/Value Pair | プレビューiframeを表示するサイズをエディターに示します。例：`{"value":520}`                              |

## `dnd_area`タグ内でHubLを使用してレスポンシブスタイルを定義する

`dnd_area`タグの内部で要素を使用する場合には、[既存のスタイル設定](https://developers.hubspot.jp/docs/cms/hubl/tags/dnd-areas)を引き続き使用できます。さらに、これらの属性のレスポンシブスタイルも定義できます。以下の[`dnd_section`](https://developers.hubspot.jp/docs/cms/hubl/tags/dnd-areas#drag-and-drop-section-code-dnd-section-code-)の例を参照してください。

```hubl theme={null}
{% dnd_section padding={ 'top': 100, 'bottom': 100 } %}
{% end_dnd_section %}
```

「mobile」ブレークポイントのパディングを変更するだけの場合は、「default」ブレークポイント（この例ではデスクトップビューが考慮されます）と「mobile」ブレークポイントの両方に以下のように値を指定します。

```hubl theme={null}
{% dnd_section padding={
    'default': { 'top': 100, 'bottom': 100 },
    'mobile': { 'top': 20, 'bottom': 20 }
  }
%}
{% end_dnd_section %}
```

この機能は現在、`dnd_section`、`dnd_row`、および`dnd_column`タグで機能します。

## モジュール

現在、モジュールには、コンテンツエディター上でモバイルオプションを設定できます。テンプレートでのモジュールにレスポンシブの既定値を設定することは、まだサポートされていません。この機能は今後のご提供を予定しています。その際、本ページを更新し、ご紹介いたします。