English 中文 العربية 日本語 Português

<template>: TEMPLATE 要素

最終更新：2026-10-13

<template>TEMPLATE 要素

再利用可能な HTML の断片を宣言します。JavaScript が複製して挿入するまで、描画もスクリプト実行もされません。

カテゴリスクリプトと埋め込み
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </template> タグ
ステータス標準

📝 構文

<template id="row">
  <tr><td></td></tr>
</template>
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<template> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： template の内容は DOM に存在しますが、非表示で非アクティブです。.content でアクセスしてから cloneNode で複製します。

❓ よくある質問

Qtemplate の中の内容は描画されますか？
Aされません。<template> の内容はページ読み込み時に解析されますが、描画されず、スクリプトも実行されず、画像も読み込まれません。「不活性な文書フラグメント」に格納されます。JS でクローン（content.cloneNode(true)）して DOM に挿入して初めて描画されます。クライアント側テンプレートの標準的な実装方法です。
Qtemplate と display:none の div の違いは何ですか？
A本質が違います。display:none の内容は生きた DOM のままです。スクリプトは実行され、画像は読み込まれ、セレクタでも選べてしまいます。<template> の内容は完全に不活性で、副作用ゼロ、通常のセレクタでは命中しません。後で使うテンプレートの保管には必ず template を使います。
Qtemplate は入れ子にできますか？
Aできます。template の中にさらに template を置けます。外側が活性化されていないうちは、内側も不活性のままです。入れ子のテンプレートは、リストの中にリストを入れるような多層のリスト構造を作るのに向いており、階層ごとにクローンして流し込みます。
<slot> <script>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%