> ## 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. # HTML＋HubLテンプレート > CMS Hubのテンプレートは、HTMLとHubLで作成されています。これらのテンプレートには、制作担当者が自力で簡単に編集できる領域を含めることができます。 HTML＋HubLテンプレートは、CMS Hubの[どのテンプレートのタイプ](https://developers.hubspot.jp/docs/guides/cms/content/templates/overview#template-types)にも使用できます。このテンプレートは[HubLテンプレート作成言語](/cms/reference/hubl/operators-and-expression-tests)をサポートする.htmlファイルです。このようなHubL対応のコードテンプレートのプレビューには、[デザインマネージャーのテンプレートプレビュー](https://knowledge.hubspot.com/ja/website-pages/understand-a-hubspot-template-setup)またはサンドボックスアカウントを使用するのが最適です。HTML＋HubLテンプレートには[パーシャル](#partials)を含めることができます。パーシャルはヘッダーやフッターなど、共通の要素に使用するコードを分ける際に使用できます。 HTML＋HubLテンプレートを使用すると、開発者は[ビジュアル デザイン マネージャーのドラッグ＆ドロップ方式のテンプレート](/cms/start-building/building-blocks/drag-and-drop/drag-and-drop-templates)を使用する場合よりも柔軟に制御できます。これにより、開発者は[ドラッグ＆ドロップ機能](/cms/reference/hubl/tags/dnd-areas)を使用して、HTML＋HubLテンプレートでなければ実現できない、快適な編集環境を制作担当者に提供できます。 image1-2 上記のテンプレートは、[HubSpotのCMSボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)に含まれている[base.htmlテンプレート](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)（英語）です。HubSpotで開発を行う際にはこのボイラープレートから始めると便利です。 ## 習熟度とツール選び HTML＋HubLテンプレートはコード化されたファイルであるため、お好みのツールを使用してローカル環境でも編集できます。推奨されるのは、HubSpot独自の[ローカル開発ツール](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli)の使用です。HubSpotの開発ツールでは、デベロッパー ファイル システムとファイルマネージャーのファイルを安全に管理し、[アップロード](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#upload)、[取得](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#fetch)、[監視](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#watch)、[作成](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#create)することができます。 以前に他のテンプレート言語を使用した経験がある場合は、それと同様の方法で、HubSpotでもHTML＋HubLテンプレートを構築できます。主な違いは、HubSpotでは、制作担当者にとって最適な編集環境を実現するために注力していること、そしてメンテナンスとパフォーマンス最適化の開発者の作業負担の大部分を軽減していることです。 例えば、特定のモジュールを対象に所定のページでCSSファイルを読み込む必要がある場合、``を使用する代わりに、[モジュールのmeta.jsonファイル](/cms/reference/modules/configuration#adding-css-and-javascript-dependencies)内にある`css_assets`を使用してスタイルシートをインクルードします。これにより、HubSpotは、モジュールがページに存在する場合にのみCSSを条件付きで読み込むため、不必要に読み込まれるCSSの量を最小限に抑えることができます。 詳しくは、[HubSpot開発ワークフローの最適化方法](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)をご確認ください。 ## テンプレートアノテーション テンプレートの上部に含まれるテンプレートアノテーションは、重要なテンプレート設定を構成するためのもので、テンプレートのタイプや新しいコンテンツの作成に使用できるかどうかなどを設定できます。テンプレートアノテーションは、開発プロセス中にいつでも変更できます。利用可能なテンプレートアノテーションの詳細については、以下をご覧ください。 ```html theme={null} ... ``` | アノテーション | タイプ | 説明 | | -------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `templateType` | 文字列 | ファイルのテンプレートタイプを指定します。指定可能な値は、次のとおりです。
| | `isAvailableForNewContent` | 文字列 | コンテンツ作成プロセスでテンプレートを選択できるかどうかを指定します。指定可能な値は、`true`および`false`です。このアノテーションが`false`に設定されているテンプレートには、[必須の変数](/cms/reference/hubl/variables#required-page-template-variables)を含める必要はありません。このアノテーションがfalseに設定されている、`page`タイプのテンプレートは、[標準パーシャル](#partials)としても使用できます。 | | `enableDomainStylesheets` | 文字列 | テンプレートで[ドメインスタイルシート](https://knowledge.hubspot.com/ja/design-manager/create-edit-and-attach-css-files-to-style-your-site#attach-or-remove-stylesheets-on-a-domain-level)を読み込むかどうかを指定します。指定可能な値は、`true`、`false`です。 | | `Label` | 文字列 | テンプレート選択画面に表示される、テンプレートについての分かりやすい説明文。例：`About Page`、`Homepage`、`Pricing`。 | | `screenshotPath` | 文字列 | 制作担当者がテンプレートを選択しているときに表示されるスクリーンショット。このスクリーンショットによってテンプレートが区別しやすくなります。 | ## ヘッダーとフッターのインクルード ファイルがテンプレートパーシャルでない限り、HubSpotのテンプレートを使用するには2つのタグが必要です。この2つのタグを次に示します。 * `{{ standard_header_includes }}`必要なCSSを結合してミニフィケーションし、自動的に追加するために使用します。 * `{{ standard_footer_includes }}`HubSpotトラッキングスクリプトやモジュールなどの要素で使用するJavaScriptをページの下部に動的に追加するために使用します。 これらのタグは、テンプレート内に存在するか、またはテンプレートの子[パーシャル](#partials)として公開して使用する必要があります。 ## パーシャル テンプレートパーシャルは、他のコードファイルにインクルードできるHTML＋HubLファイルです。パーシャルを使用して複数のテンプレートの間でマークアップを共有することで、モジュール方式の開発アプローチをとることができます。例えば、ヘッダーをパーシャルにすれば、コンポーネントとして簡単にインクルードでき、再度コード化する必要がなくなります。 ### 標準パーシャル 標準パーシャルとは、個々のページで編集できるコンテンツを含む、再利用可能なテンプレートまたはコンポーネントのことです。常にコンテンツを共有するグローバルパーシャルとは異なり、標準パーシャルでは、制作担当者が個々のページで必要に応じてコンテンツを変更できます。例えば下記のコードでは、サイドバーモジュールが別のテンプレートファイルに取り込まれます。 標準パーシャルの場合、テンプレートファイルの先頭に次の[アノテーション](/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations)を組み込む必要があります。 * `templateType: page` * `isAvailableForNewContent: false` ```hubl theme={null} {% include "../partial/sidebar.html" %} ``` ### グローバルパーシャル グローバルパーシャルとは、そのパーシャルの全てのインスタンスで共有されるコンテンツを含む一種の[グローバルコンテンツ](/cms/start-building/building-blocks/global-content#global-partials)であり、複数のテンプレートで使用できます。多くの場合、ヘッダーとフッターにはグローバルパーシャルが使用されます。その一例として、HubSpotのCMSボイラープレートの[ヘッダー](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/header.html)（英語）と[フッター](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/partials/footer.html)（英語）をご確認ください。これらのパーシャルは、[base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)内で`global_partial`タグを使用して呼び出されます。 グローバルパーシャルの場合、ファイルの先頭に[アノテーション](/cms/start-building/building-blocks/templates/html-hubl-templates#template-annotations)として`templateType: global_partial`を組み込む必要があります。 ```hubl theme={null} {% global_partial path="../partials/header.html" %} ``` ### ブロックと拡張 複雑なテンプレートを作成するときは、親テンプレートを拡張する区画となるブロックを作成できます。 例えば、必須の変数である[`standard_header_includes`](/cms/reference/hubl/variables#required-page-template-variables)と[`standard_footer_includes`](/cms/reference/hubl/variables#required-page-template-variables)を含む親テンプレートを作成できます。このテンプレート内で、以下の構文を使用して一意のブロックを定義します。`body`は一意の名前です。 ```hubl theme={null} {% block body %} {% endblock body %} ``` これにより、子テンプレート内で親テンプレートを拡張して、`body`ブロックにさらにコンテンツを挿入することができます。 ```hubl theme={null} {% extends "./layouts/base.html" %} {% block body %}

Page Content

{% endblock %} ``` この方法は、HubSpotのCMSボイラープレートに含まれる[base.html](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)（英語）テンプレートで使用されています。このテンプレートが、[templatesフォルダー](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates)（英語）内の他のテンプレートによって拡張されるようになっています。 ### グローバルグループ デザインマネージャーのドラッグ＆ドロップ テンプレート ビルダーを使用して作成された[グローバルグループ](https://knowledge.hubspot.com/ja/design-manager/use-global-content-across-multiple-templates)を含めることもできます。以下に構文を示します。 ```hubl theme={null} {% include "/path/to/global_header.template.json" %} ```